我有:
<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 的图像的不透明度不会改变。
最佳答案
您需要使用 JavaScript。例如:
document.getElementById("div1").on("mouseover", function() {
document.getElementById("div2").style.opacity = ".5";
});
或使用 JQuery:
$("#div1").hover(function() {
$("#div2").style.opacity = ".5";
});
关于html - 如何使用CSS同时更改悬停的元素和另一个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21291941/