html - 如何使用CSS同时更改悬停的元素和另一个div

Question

我有:

<div id="div1"><a href="blah"></a></div>
<div id="div2">Text</div>

这两个元素层叠在一起，div 1 可见。我希望鼠标悬停在 div one 上，div 2 中的文本显示在 div one 中的图像上，并且 div one 的不透明度变为半透明。这是我目前正在尝试的:

#div1:hover {
z-index:1;
opacity:0.2;
}

#div1:hover ~ #div2{
display:block;
z-index:2;
}

#div2:hover ~ #div1{
z-index:1;
opacity:0.2;
display:none;
}

#div2:hover{
display:block;
z-index:2;
}

文本在悬停时显示，但是，当我悬停时，来自 div1 的图像的不透明度不会改变。

Answer 1

您需要使用 JavaScript。例如:

document.getElementById("div1").on("mouseover", function() {
    document.getElementById("div2").style.opacity = ".5";
});

或使用 JQuery:

$("#div1").hover(function() {
    $("#div2").style.opacity = ".5";
});