一个元素的CSS事件如何改变另一个元素

Question

我该如何使用CSS在另一个元素上触发事件来更改元素？

E.g. <div id="one"> ....., <div id="two">....

<style>
#one:hover
{
changing the visibility of #two...
}
</style>

- user1665232

Answer 1

在您的情况下，您希望更改的元素位于您悬停的元素之后，这意味着您的结构类似于：

<div id="one"></div>
<!--you could have some elements between them-->
<div id="two"></div>

或者像这样：

<div id="one">
    <!--maybe some elements-->
        <div id="two"></div>
    <!---->
</div>

在第一种情况下（#one和#two是兄弟元素，也就是说它们处于同一层级 = 有相同的父元素），您需要使用通用兄弟选择器（~），如下所示：

#one:hover ~ #two { /* style changes */ }

演示，当#one和#two是兄弟节点且#one在HTML中位于#two之前时使用。

在第二种情况下（#two是后代节点），您需要使用：

#one:hover #two { /* style changes */ }

演示展示了当#two是#one的子元素时的情况。

然而，如果您希望更改在HTML中在#one之前的元素，则目前（这可能会在未来发生改变）无法仅使用CSS实现（如果您想知道原因，请参阅本文）。

---

但是，在这种情况下，当HTML中#two在#one之前时，您可以使用JavaScript实现。例如，如果#two的不透明度最初为0，那么您可以使用以下代码在悬停#one时将其更改为1：

var one = document.getElementById('one'),
    two = document.getElementById('two');
one.addEventListener('mouseover', function(){
    two.style.opacity = 1;
}, true);
one.addEventListener('mouseout', function(){
    two.style.opacity = 0;
}, true);

演示

如果您使用像jQuery这样的库，那么它会变得更加容易：

$('#one').hover(function(){
    $('#two').css({'opacity': 1})},
function(){
    $('#two').css({'opacity': 0})
});​​

演示

- Ana

Answer 2

使用:hover选择器和~常规兄弟选择器的组合：

div.margin:hover ~.margin2
{
    background: #00f;
}

将鼠标悬停在第二个div上，你会看到另一个div的变化。

为了使其生效，这两个div必须是兄弟元素（具有相同的父元素）。

http://jsfiddle.net/Kyle_Sevenoaks/mmcRp/

- Kyle