内联样式作为：悬停在CSS中 [英] Inline style to act as :hover in CSS

问题描述

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

I know that embedding CSS styles directly into the HTML tags they affect defeats much of the purpose of CSS, but sometimes it's useful for debugging purposes, as in:

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

嵌入规则的语法如下：

a:hover {text-decoration: underline;}

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

into the style attribute of an A tag? It's obviously not this...

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

...因为这将适用于所有时间，而不是只在悬停期间。

...since that would apply all the time, as opposed to just during hover.

推荐答案

我恐怕无法做到，伪类选择器不能在线设置，必须在网页或样式表上执行。

I'm afraid it can't be done, the pseudo-class selectors can't be set in-line, you'll have to do it on the page or on a stylesheet.

我应该提及 根据CSS规范 ，但大多数浏览器都不会 t支持它

I should mention that technically you should be able to do it according to the CSS spec, but most browsers don't support it

修改：我只是用这个快速测试：

I just did a quick test with this:

<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。任何人都可以在任何其他浏览器中测试？

And it doesn't work in IE7, IE8 beta 2, Firefox or Chrome. Can anyone else test in any other browsers?

这篇关于内联样式作为：悬停在CSS中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！