2

我有一个网页，中间有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 之间的最大区别是什么？？

4

2 回答 2

2

http://jsfiddle.net/yy9Rr/

您的解决方案很接近，但您需要将其更改为

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

使用~, 给出类似的东西

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

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

a ~ b表示作为 的后续兄弟的任何b元素，a不一定是紧邻的。

于 2013-07-18T02:01:44.140 回答
0

尝试使用 JavaScript：

document.getElementById("img3").onmouseover = function() {
document.getElementById("img4").style.opacity = ".2";
document.getElementById("img5").style.opacity = ".2";
}
于 2013-07-18T01:19:20.013 回答