内联样式如何在CSS中起到:hover的作用

Question

我知道直接在HTML标签中嵌入CSS样式会削弱CSS的作用，但有时候出于调试目的这么做很有帮助，例如：

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

如何嵌入规则的语法如下：

a:hover {text-decoration: underline;}

如何将CSS样式插入到A标签的style属性中？显然不是这样做...

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

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

- raldi

---

理论上，如果您想将悬停效果做成动态的，可以使用JavaScript将一个hover规则注入到样式表中，利用window.document.styleSheets列表中已有的样式表。 - GAgnew

请参见 https://dev59.com/PG435IYBdhLWcg3wpx2x。 - rogerdpack

Answer 1

很抱歉，无法完成。伪类选择器不能在行内设置，必须在页面或样式表上进行。

我应该提到，技术上你是可以根据CSS规范来做的，但大多数浏览器不支持它。

编辑：我刚刚用这个进行了快速测试：

<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中无法运行。还有人可以在其他浏览器中测试吗？

- Glenn Slaven

---

这是一份非常低优先级的CSS3工作草案，已经六年没有更新了。从规范来看：“将W3C工作草案用作参考资料或引用它们除了表示“正在进行中”的状态外都是不合适的。” - Jim

是的，但浏览器确实实现了一些CSS3规则，“应该”可能不是这种情况下正确的词。 - Glenn Slaven

此答案发布的时间已经很久了，事情在那之后发生了变化。相关W3C规范的当前版本——CSS Style Attribute Rec.（http://www.w3.org/TR/css-style-attr/#syntax）——明确表示style属性只能包含CSS声明块的内容。因此，现在无法使用`style`属性插入伪元素。 - Ilya Streltsyn

我只是需要一个快速修复，它在 Chrome 93.0.4577.82 中起作用。 我在链接标签中添加了类似于这样的内容：<a href="" style="text-decoration:underline; :hover {text-decoration:none};">test</a>尽管应该避免使用内联样式，但有时候快速修复还是很有帮助的。 :) 感谢提示！ - davidman77

哦！编辑评论需要5分钟？最终版本：我只是需要快速修复，它在Chrome 93.0.4577.82中有效。我将类似于这样的内容添加到链接标签中：<a href="" style="text-decoration:underline; :hover {text-decoration:none}">test</a>重要提示：在}后面加上;是无效的。 所以这个不行： <a href="" style="text-decoration:underline; :hover {text-decoration:none};">test</a> 这个也不行： <a href="" style=":hover {text-decoration:none};">test</a>尽管应该避免使用内联样式，但有时快速修复很有帮助。 :) 谢谢你的提示！ - davidman77

Answer 2

如果你只是在调试，你可以使用 JavaScript 来修改 CSS：

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

- Aleksi

---

我在使用JSF时遇到了问题，这段代码帮助我解决了它。onmousemove="this.style.color='##{cc.attrs.color}';" onmouseout="this.style.color='white';" - kdoteu

谢谢！这对我有用 :) - Fatihi Youssef

另一种方法是使用指针事件，这对于不同的设备更好，我们也可以改变整个样式属性：<div style="color: green; background: gray" onpointerenter="this.setAttribute('style', 'color: blue; background: red')" onpointerleave="this.setAttribute('style', 'color: red; background: blue')">一些内容</div> - KevynTD

Answer 3

一个简单的解决方案:

<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>

- Roberto

---

谢谢。这个在Blogger上对于一张图片起作用了。 - dawn

Answer 4

如果是为了调试，只需添加一个CSS类以进行悬停（因为元素可以有多个类）：

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

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

- noblethrasher

---

这可能是您实现所需效果的最接近方式。 - Glenn Slaven

Answer 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>

- Josh Kernich

Answer 6

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

- michielbdejong