内联样式充当:悬停在CSS中

Question

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

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

嵌入规则的语法是什么:

a:hover {text-decoration: underline;}

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

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

...因为那将一直适用,而不是仅仅在悬停期间.

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中不起作用.其他人可以在任何其他浏览器中测试吗？

Answer 2

如果您只是调试,可以使用javascript来修改css:

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

Answer 3

如果是用于调试,只需添加一个用于悬停的css类(因为元素可以有多个类):

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

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

Answer 4

简单的解决方案:

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