内嵌样式为行动：将鼠标悬停在CSS

我知道，直接嵌入CSS样式到它们所影响的HTML标签击败多的CSS的目的，但有时它用于调试，如：内嵌样式为行动：将鼠标悬停在CSS

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

什么是嵌入就像一个规则的语法：

a:hover {text-decoration: underline;}

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

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

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

来源

2008-09-25 raldi

理论上，如果你正试图使悬停动态的东西，你可以使用JavaScript注入悬停规则将使用现有的张window.document.styleSheets列表样式表。 – GAgnew 2011-11-09 21:52:20

另请参阅https：// stackoverflow。com/questions/5293280/css-pseudo-classes-with-inline-styles – rogerdpack 2017-07-06 20:14:52

恐怕不能完成，伪类选择器不能在线设置，您必须在页面或样式表上进行设置。

我应该指出，技术上你应该能够做到这一点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。任何人都可以在其他浏览器中测试吗？

来源

2008-09-25 05:55:13

这是一个非常低优先级的CSS 3工作草案，六年内还没有更新。根据规范：'使用W3C工作草案作为参考材料或将其引用为“正在进行中的工作”以外是不恰当的。 ' – Jim 2008-09-25 06:12:50

确实，但浏览器确实实现了一些CSS3规则，*应该*在这种情况下可能是错误的词 – 2008-09-25 06:17:33

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

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

来源

2008-09-25 05:59:56

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

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

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

来源

2008-09-25 06:08:41

-1

我不认为jQuery支持伪选择要么，但它确实提供了一个快速的方式对事件添加到一个，多个或所有类似的控件和标签的单个页面上。

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

来源

2008-09-25 06:11:49 CMPalmer

一个简单的办法：

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

来源

2014-08-15 20:45:28 Roberto

我把一个快速的解决方案，任何人想要在不使用的onmouseover CSS和onmouseout行为创建悬停弹出窗口。

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>

来源

2014-10-14 23:23:56

内嵌样式为行动：将鼠标悬停在CSS

回答

相关问题