如何在 html-tag 中使用 CSS 悬停？ [复制]答案

【问题标题】：How to use CSS hover inside html-tag? [duplicate]如何在 html-tag 中使用 CSS 悬停？ [复制]
【发布时间】：2010-12-22 12:22:27
【问题描述】：

我想做这样的事情：

<li style="hover:background-color:#006db9;">

但它不会工作。这有可能以某种方式完成，还是我必须在头部或外部 css 文档中编写 css？

【问题讨论】：

标签： html css

【解决方案1】：

AFAIK 这不能在没有 Javascript 的情况下内联完成。正如您已经建议的那样，您必须将其放入头部或外部样式表中。

正文中的<style> 标记也被我知道的所有浏览器解释，但无效，因此不推荐。

【讨论】：

【解决方案2】：

使用style 属性是不可能的。您必须在文档本身或外部文件中使用 CSS。

li:hover { background-color:#006db9; }

如果这不是一个选项，那么您将不得不求助于 JavaScript。

【讨论】：

【解决方案3】：

AFAIK 您不能在内联 css 上使用伪类（:hover、:active 等）。

【讨论】：

【解决方案4】：

您可以将其嵌套在锚标记 <a href="#" class="hoverable"> 中，而不是仅使用 <li>，然后将此样式放在文件顶部或外部 CSS 文件中：

a.hoverable:hover{background-color:#006db9}

或者你可以只使用 Javascript 来避免使用锚标记。

我推荐JQuery。

【讨论】：

【解决方案5】：

内联样式是不可能的，但是（in）著名的 onmouseover / onmouseout 事件处理程序可以做同样的事情。

<li onmouseover="this.style.backgroundColor='#006db9'" onmouseout="this.style.backgroundColor=''">

警告：带有连字符的 CSS 定义必须使用 camelCase 转换为 Javascript，例如 (css)background-color = (javascript)backgroundColor

【讨论】：