有没有办法使用jQuery 选择/操作CSS伪元素,如::before和::after(以及带有一个分号的旧版本)?
例如,我的样式表具有以下规则:
.span::after{ content:'foo' }
Run Code Online (Sandbox Code Playgroud)
如何使用jQuery将'foo'更改为'bar'?
我正在寻找一种方法来改变JavaScript类的伪类选择器(例如:link,:hover等)的CSS规则.
所以CSS代码的类比:a:hover { color: red }在JS中.
我无法在其他任何地方找到答案; 如果有人知道这是浏览器不支持的东西,那么这也是一个有用的结果.
考虑:
<input type="radio" id="a"/>
<label for="a">Hello</a>
Run Code Online (Sandbox Code Playgroud)
将鼠标悬停在单选按钮或标签上时,单选按钮会突出显示.不同的浏览器以不同的方式突出显示它,但它看起来像默认行为 现在让我们说有一个
<div id="bla">blabla</div>
Run Code Online (Sandbox Code Playgroud)
在页面的其他地方.当鼠标悬停在div#bla?时,有没有办法触发单选按钮的默认突出显示?
编辑:为了澄清,我希望"触发"一个元素的原生":hover"伪类,这是不可能的. 规格
我刚刚学会了一点jQuery,并试图将它用于简单的变色效果.假设我有两个<div> s,#foo和#bar.#foo有很多URL,并定义了以下CSS:
#foo a {color: blue; border-bottom: 1px dashed blue}
#foo a:hover {color: black; border-bottom: 1px solid black}
Run Code Online (Sandbox Code Playgroud)
现在我想在用户单击#bar时更改#foo中链接的颜色(a:link),但保持a:hover颜色不变,所以我写这样的函数:
//...
$("#bar").click(function () {
$("#foo a").css("color", "red");
});
//...
Run Code Online (Sandbox Code Playgroud)
问题是,虽然此功能确实将所有链接更改为红色,但是a:悬停颜色丢失,即当用户将光标移动到链接时,它们将保持红色,而不是像我预期的那样变黑.
因为我看到jQuery所做的是<a在#foo中将内联样式放到> s中,使它们成为<a style="color:red;" href="...">,我想这将覆盖:hover伪类.由于伪类的内联样式attr还没有被任何人实现,我怀疑我是否可以完全达到预期的效果......
还有,有什么解决方案不要求我写这样的东西
$("#foo a").hover(
function(){ $(this).css("color", "black");},
function(){ $(this).css("color", "blue");}
)
Run Code Online (Sandbox Code Playgroud)
?
谢谢.