使用JavaScript:

a)增加内联样式

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

B)或者更难一点的方法——添加“鼠标悬停”

document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };

注意:JavaScript中的多词样式(即font-size)是一起编写的:

element.style.fontSize="12px"

如果您确实需要内联代码，则可以这样做。我需要它的一些悬停按钮，方法是这样的:

.hover-item { background - color: # FFF; ｝ .hover-item:{徘徊 background - color:继承; ｝ <a style="background-color: red;"> < div class = " hover-item”> 内容 < / div > < /

在本例中，内联代码:"background-color: red;"是悬停时的开关颜色。用你需要的颜色，然后这个解决方案。我意识到，就兼容性而言，这可能不是完美的解决方案，但如果绝对需要，这是可行的。

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

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

虽然“你不应该”的上下文可能适用，但可能在某些情况下你仍然想实现这一点。我的用例是根据一些数据值动态设置悬停颜色，以实现只有CSS可以受益于特异性。

只使用CSS

CSS

/* Set your parent color for the inherit property */
.sidebar {
  color: green;
}

/* Make sure your target element "inherit" parent color on :hover and default */
.list-item a {
  color: inherit
}

.list-item a:hover {
  color: inherit
}

/* Create a class to allows to get hover color from inline style */
.dynamic-hover-color:not(:hover) {
  color: inherit !important;
}

然后你的标记会像这样:

标记

<nav class="sidebar">
  <ul>
    <li class="list-item">
      <a
        href="/foo"
        class="dynamic-hover-color"
        style="color: #{{category.color}};"
      >
        Category
      </a>
    </li>
  </ul>
</nav>

我用把手来做这个例子，但想法是你采取任何方便你的用例来设置内联样式(即使它是手动写你想要的悬停颜色)

下面是最好的代码示例:

<一个 Style =" font - family:宋体;font - family:宋体;" href = " http://aashwin.com/index.php/education/library/ " onmouseover = " this.style.color = # 0 f0” onmouseout = " this.style.color = # 00 f”> 图书馆 < / >

主持人建议:保持关注点的分离。

超文本标记语言 <一个 Style =" font - family:宋体;font - family:宋体;" href = " http://aashwin.com/index.php/education/library/ " 类= " lib-link " > 图书馆 < / >

JS

const libLink = document.getElementsByClassName("lib-link")[0]; //数组0假设只有一个链接， //你将不得不循环或使用事件委托为多个 //但我们不会在这里深入讨论 libLink。Onmouseover = function () { this.style.color = ' # 0 f0 ' ｝ libLink。Onmouseout = function () { this.style.color = ' # 00 f ' ｝

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

.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)。