将鼠标悬停在图像上，更改另一个图像的 z-index答案

【问题标题】：Hover over an Image, change another Image's z-index将鼠标悬停在图像上，更改另一个图像的 z-index
【发布时间】：2013-07-18 01:15:25
【问题描述】：

我有一个网页，中间有6个小图和1个大图（实际上是6层，每个包含1个图像），就像这样：http://jsbin.com/onujiq/1/;我已将所有中心图像的 z-index 属性设置为 (-1)。我想要做的是，当我将鼠标悬停在 6 个小图像中的 1 个上时，相应的图像将显示为中心的大图像（例如，通过将相应的中心图像的 z-index 更改为 5）；但无论我如何尝试，它都不是我想要的。请帮我解决这个问题（我只使用 CSS）；提前谢谢你！

PS：当我测试悬停时，另一个令人困惑的问题是当我使用此代码时：

#img3:hover + #img4{
    opacity: 0.2;
}

它确实有效，但是当我使用它时：

#img3:hover + #img5{
    opacity: 0.2;
}

它没有！我还是不知道#img4 和#img5 有什么区别？？

【问题讨论】：

标签： html css hover z-index

【解决方案1】：

http://jsfiddle.net/yy9Rr/

你的解决方案很接近，但你需要改变它

#img3:hover + #img4{
    opacity: 0.2;
}

使用~，提供类似的东西

#img3:hover ~ #imgCenter3 {
    z-index: 10;
}

a + b 表示紧跟在元素 a 之后的任何 b 元素

a ~ b 表示任何 b 元素，它是 a 的以下同级元素，不一定是紧邻的。

【讨论】：

【解决方案2】：

尝试使用 JavaScript：

document.getElementById("img3").onmouseover = function() {
document.getElementById("img4").style.opacity = ".2";
document.getElementById("img5").style.opacity = ".2";
}

【讨论】：