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

我担心无法完成，伪类选择器无法在线设置，您必须在页面或样式表上进行。

我应该提一下技术你应能够做到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中无效。其他人可以在任何其他浏览器中测试吗？

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>

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>

Answer 6

如果该'&:hover'标签是用JavaScript创建的，那么您还有另一种选择：使用JSS将样式表以编程方式插入文档头。它确实支持$images = explode("\n", $value ); $value = ''; foreach ($images as $im){ $value .= '<img src="'. $im . '" style="max-width:1024px"/> <br />'; }。 https://cssinjs.org/

Answer 7

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

最重要的是，如果需要，您可以将事件绑定链接并在一行脚本中完成所有操作。比手动编辑所有HTML以打开或关闭它们要容易得多。再说一遍，因为你可以在CSS中做同样的事情，我不知道它会为你买任何东西（除了学习jQuery）。

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

7 个答案: