虽然“你不应该”的上下文可能适用，但可能在某些情况下你仍然想实现这一点。我的用例是根据一些数据值动态设置悬停颜色，以实现只有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>

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

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

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

正如所指出的，你不能为悬停设置任意的内联样式，但你可以在CSS中使用以下方法在适当的标签中更改悬停光标的样式:

style="cursor: pointer;"

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

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

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

我只是想出了一个不同的解决方案。

My issue: I have an <a> tag around some slides/main content viewer as well as <a> tags in the footer. I want them to go to the same place in IE, so the whole paragraph would be underlined onHover, even though they're not links: the slide as a whole is a link. IE doesn't know the difference. I also have some actual links in my footer that do need the underline and color change onHover. I thought I would have to put styles inline with the footer tags to make the color change, but advice from above suggests that this is impossible.

解决方案:我给了脚注链接两个不同的类，我的问题就解决了。我能够有onHover的颜色改变在一个类，有幻灯片onHover没有颜色变化/下划线，仍然能够有外部href在页脚和幻灯片在同一时间!

它不是内联CSS，但它是内联的。

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