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

恐怕无法完成,伪类选择器无法在线设置,您必须在页面或样式表上完成。

我应该提一下 从技术上讲 你 能做到 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中都不起作用。其他人可以在其他浏览器中进行测试吗?

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

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

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

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

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

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

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>

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

我不这么认为 jQuery

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