Question

是否可以修改位于悬停选择器外的其他元素？

例如：

#first-element img:hover {

}
#second-element {    
  background:url('#');
}

这样你可以在悬停第一个元素时修改第一个元素之外的第二个元素吗？

感谢。

Answer 1

您可以使用JavaScript通过onmouseover和onmouseout属性更改其他元素的样式属性：

HTML：

<img src="myimage.jpg" alt="Image to hover" onmouseover="overFunction();" onmouseout="outFunction();"/>

JavaScript的：

function overFunction () {
    document.getElementById("second-element").style.backgroundImage="url('1.jpg')";
}
function outFunction () {
    document.getElementById("second-element").style.backgroundImage="url('2.jpg')";
}

这里小提琴： http://jsfiddle.net/Nillervision/H4ubB/

Answer 2

你问的是不可能的。

如果你改变问题的方法并且元素之后直接跟随，你可以做类似的事情：

#first-element:hover + #second-element{}如果第一个元素悬停，则将样式应用于第二个元素。

Answer 3

如果要受影响的元素是悬停元素的兄弟，那么它可能是：

<a href="">Sometext</a>
<p class="p">Another text</p>
<p class="sp">Another text again</p>

a:hover ~ .sp {
  color: red;
}

DEMO

将选择器放在a：hover中？

3 个答案: