一个元素上的CSS事件，更改另一个元素

如何使用CSS更改另一个元素上的事件

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

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

例如。。。。
#一：悬停
{
更改#2的可见性。。。
}

组合使用

:hover

选择器和

~

常规同级选择器：

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

将鼠标悬停在div2上，您将看到另一个div发生更改

要使其工作，div必须是同级（具有相同的父元素）

---

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

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

对于HTML中的

#一

和

#二

是兄弟，并且

#一

在

#二

之前的情况

在第二种情况下（

#two

是

#one

的后代），您可以使用：

#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})
});​​

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

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