您可以编写各种类型的代码。

首先我可以这样写

HTML

<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>

CSS

.one {
    text-decoration: none;
}

你可以试试另一种方法:

HTML

<a href="https://www.google.com/" class="one">Hello siraj</a>

CSS

.one {
    text-decoration: none;
}

.one:hover {
    color: blue;
}

.one:active {
    color: red;
}

你也可以在jQuery中尝试hover:

JavaScript

$(document).ready(function() {
  $("p").hover(function() {
    $(this).css("background-color", "yellow");
    }, function() {
      $(this).css("background-color", "pink");
  });
});

HTML

<p>Hover the mouse pointer over this paragraph.</p>

在这段代码中，有三个jQuery函数。首先你准备一个函数，这是jQuery的基本函数。其次，在这个函数中有一个悬停函数。当你将一个指针悬停到文本上时，颜色会改变，然后当你释放指向文本的指针时，它会是不同的颜色，这是第三个函数。

<style>a:hover { }</style>
<a href="/">Go Home</a>

Hover是一个伪类，因此不能与样式属性一起应用。它是选择器的一部分。

所以这并不是用户想要的，但是我发现这个问题是在寻找答案，并且找到了一些相关的东西。我有一堆重复的元素，需要一个新的颜色/悬停在其中的标签。我使用句柄，这是我的解决方案的关键，但其他模板语言也可以工作。

我定义了一些颜色，并将它们传递到每个元素的handlebars模板中。在模板的顶部，我定义了一个样式标签，并放入自定义类和悬停颜色。

<style type="text/css">
    .{{chart.type}}-tab-hover:hover {
        background-color: {{chart.chartPrimaryHighlight}} !important;
    }
</style>

然后我使用模板中的样式:

<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
   Payouts
</span>

您可能不需要!important

我同意影子的说法。您可以使用onmouseover和onmouseout事件通过JavaScript更改CSS。

不要说人们需要激活JavaScript。这只是一个风格问题，所以如果有一些访问者没有JavaScript也没关系;) 尽管大多数Web 2.0都使用JavaScript。例如Facebook(大量JavaScript)或Myspace。

你可以通过在onMouseOver和onMouseOut参数中使用JavaScript更改样式来获得相同的效果，尽管如果你需要更改多个元素，这是非常低效的:

<a href=“abc.html” onMouseOver=“this.style.color='#0F0'” onMouseOut=“this.style.color='#00F'” >Text</a>

另外，我不太确定这在这里是否适用。你可能需要用document.getElementById('idForLink')来切换它。

我的问题是，我正在建立一个网站，使用大量的图像图标，必须由不同的图像悬停交换(例如，蓝色的图像变成红色的悬停)。 对此，我提出了以下解决方案:

.container div { width: 100px; height: 100px; background-size: 100px 100px; } .container:hover .withoutHover { display: none; } .container .withHover { display: none; } .container:hover .withHover { display: block; } <p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's). </p> <div class=container> <div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div> <div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div> </div>

我引入了一个包含这对图像的容器。第一个是可见的，另一个是隐藏的(display:none)。当悬停容器时，第一个容器将被隐藏(display:none)，第二个容器将再次显示(display:block)。