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

Posted 2023-03-05

【中文标题】如何在 html-tag 中使用 CSS 悬停？ [复制]

【英文标题】：How to use CSS hover inside html-tag? [duplicate]

【发布时间】：2010-12-22 12:22:27

【问题描述】：

我想做这样的事情：

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

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

【参考方案1】：

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

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

【参考方案2】：

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

li:hover  background-color:#006db9; 

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

【讨论】：

更不用说这些伪类并不适用于所有浏览器。唯一可靠的手段是 JS。

同意。不幸的是，这是事实:(

除了 IE

不多。不幸的是，IE6 是唯一在工作中“受支持”的浏览器，所以我的观点是有偏差的。

【参考方案3】：

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

【参考方案4】：

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

a.hoverable:hoverbackground-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

【讨论】：

你就是那个男人 ;-)