在 CSS 中充当 :hover 的内联样式答案

【问题标题】：Inline style to act as :hover in CSS在 CSS 中充当 :hover 的内联样式
【发布时间】：2010-09-12 23:57:18
【问题描述】：

我知道将 CSS 样式直接嵌入到它们影响的 HTML 标签中会破坏 CSS 的大部分用途，但有时它对调试目的很有用，例如：

<p style="font-size: 24px">asdf</p>

嵌入规则的语法是什么：

a:hover {text-decoration: underline;}

进入A标签的样式属性？显然不是这个……

<a href="foo" style="text-decoration: underline">bar</a>

...因为这将始终适用，而不是仅在悬停期间。

【问题讨论】：

理论上，如果您试图使悬停动态化，您可以使用 javascript 使用现有工作表的 window.document.styleSheets 列表将悬停规则注入样式表。
另见stackoverflow.com/questions/5293280/…

标签： html css

【解决方案1】：

一个简单的解决方案：

<a href="#" onmouseover="this.style.color='orange';" onmouseout="this.style.color='';">My Link</a>

或者

<script>
 /** Change the style **/
 function overStyle(object){
    object.style.color = 'orange';
    // Change some other properties ...
 }

 /** Restores the style **/
 function outStyle(object){
    object.style.color = 'orange';
    // Restore the rest ...
 }
</script>

<a href="#" onmouseover="overStyle(this)" onmouseout="outStyle(this)">My Link</a>

【讨论】：

谢谢。这在 Blogger 中适用于图像。

【解决方案2】：

如果 <p> 标记是从 JavaScript 创建的，那么您还有另一个选择：使用 JSS 以编程方式将样式表插入到文档头部。它确实支持'&:hover'。 https://cssinjs.org/

【讨论】：

【解决方案3】：

恐怕做不到，伪类选择器不能内联设置，你必须在页面或样式表上做。

我应该提一下，技术上你应该能够做到according to the CSS spec，但大多数浏览器不支持它

编辑：我刚刚做了一个快速测试：

<a href="test.html" style="{color: blue; background: white} 
            :visited {color: green}
            :hover {background: yellow}
            :visited:hover {color: purple}">Test</a>

它在 IE7、IE8 beta 2、Firefox 或 Chrome 中不起作用。其他人可以在任何其他浏览器中进行测试吗？

【讨论】：

这是一个优先级很低的 CSS 3 工作草案，六年来没有更新。来自规范：'使用 W3C 工作草案作为参考材料或引用它们而不是“正在进行的工作”是不合适的。 '
是的，但是浏览器确实实现了一些 CSS3 规则，应该在这种情况下可能是错误的词
浏览器通常会实现处于进一步开发状态的 CSS 功能，例如opacity 来自 CSS Color（Last Call），Media Queries 是候选推荐。
不会 style=":hover {}" 等同于样式表中的 "a { :hover {} }" 吗？这显然是一个语法错误。
这个答案是很久以前发布的，从那以后事情发生了变化，相关 W3C 规范的当前版本——CSS Style Attribute Rec。 (w3.org/TR/css-style-attr/#syntax) — 明确表示 style 属性只能包含 CSS 声明块的内容。所以现在不可能插入带有style属性的伪元素。

【解决方案4】：

如果你只是调试，你可以使用javascript来修改css：

<a onmouseover="this.style.textDecoration='underline';" 
    onmouseout="this.style.textDecoration='none';">bar</a>

【讨论】：

用 JSF 搜索了一个解决方案，这帮助我修复了它。 onmousemove="this.style.color='##{cc.attrs.color}';" onmouseout="this.style.color='white';"
谢谢！这对我有用:)
另一种方式是使用指针事件，对于不同的设备更好，我们也可以更改整个样式属性：<div style="color: green; background: gray" onpointerenter="this.setAttribute('style', 'color: blue; background: red')" onpointerleave="this.setAttribute('style', 'color: red; background: blue')">some content</div>

【解决方案5】：

我为任何想要使用 onmouseover 和 onmouseout 行为在没有 CSS 的情况下创建悬停弹出窗口的人提供了一个快速解决方案。

http://jsfiddle.net/Lk9w1mkv/

<div style="position:relative;width:100px;background:#ddffdd;overflow:hidden;" onmouseover="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">first hover<div style="width:100px;position:absolute;top:5px;left:110px;background:white;border:1px solid gray;">stuff inside</div></div>

【讨论】：

【解决方案6】：

我认为jQuery 也不支持伪选择器，但它确实提供了一种快速的方法来将事件添加到单个页面上的一个、多个或所有类似控件和标签。

最重要的是，如果您愿意，您可以链接事件绑定并在一行脚本中完成所有操作。比手动编辑所有 HTML 以打开或关闭它们要容易得多。再说一次，既然你可以在 CSS 中做同样的事情，我不知道它会给你带来什么（除了学习 jQuery）。

【讨论】：

【解决方案7】：

如果是用于调试，只需添加一个用于悬停的css类（因为元素可以有多个类）：

a.hovertest:hover
{
text-decoration:underline;
}

<a href="http://example.com" class="foo bar hovertest">blah</a>

【讨论】：

这可能是最接近你想要的效果