css - 一个元素上的 CSS 事件，改变另一个

Question

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

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

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

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 */ }

用于HTML 中何时#one和#two是兄弟姐妹和#one之前的情况的演示。#two

在第二种情况下（#two是 的后代）#one，您使用：

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

DEMO适用于 when#two是#one.

但是，如果您希望更改 HTML 中之前 #one的元素，那么目前（意味着将来可能会更改）仅靠 CSS 是不可能的（如果您想知道原因，那么本文提供了解释） .

---

但在这种情况下，HTML 中的 when#two是 before #one，您可以使用 JavaScript 来完成。例如，如果#two最初的不透明度是0，那么您可以1在悬停时#one使用：

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

演示

Answer 2

使用:hover选择器和~General Sibling 选择器的组合：

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

将鼠标悬停在 div 2 上，您会看到另一个 div 发生变化。

为此，div 必须是兄弟姐妹（具有相同的父元素）。

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