如何通过将图像悬停在另一个div中来将图像悬停在一个div上？

Question

HI

我有5个div。 （div class =“part1”class =“part2”class =“part3”class =“part4”class =“part5”全部浮动到左侧，宽度为20％），因此它们排成一行。

每个div包含2个图像假设image1的id为“top”，image2的id为“bottom”（分别在所有div中）。

现在我要做的就是，我把ID为“底部”的所有图像的不透明度为0，上徘徊像“顶”我改变“底部”不透明度为1和“顶”不透明度为0

它的工作很好，直到现在。

现在我想要的是 我想在第1部分与id的第三张图片假设id =“黄色”。现在

当web负载我想显示“顶部” ID图像在部分1，当用户将鼠标悬停在部分11d

=“顶部”图像我想显示ID =“底部”图像（直至现在我实现这一目标）

现在，如果用户将鼠标悬停在第2部分，第三部分，第四部分，PART5我想显示id为“黄色”的图像部分1

我尝试使用伪选择+，〜等等，但很快我意识到，他们只有当一个div分别在其他div或内部的父div。但在我的情况下，第一部分是在第二部分之前......所以我不能改变顺序。附：我知道它可能与JS jQuery，但我不想使用它们。

一些代码

< div class="part1"> 
<img1 id="top"></img> colored image with happy child 
<img2 id="bottom"></img> yellow image with sad child 
<img3></img> plain yellow image 
</div> 

    < div class="part2"> 
<img1 id="top"></img> colored image with happy child 
<img2 id="bottom"></img> yellow image with sad child 
</div> 
<div class="part3"> 
<img1 id="top"></img> colored image with happy child 
<img2 id="bottom"></img> yellow image with sad child 
</div> 
< div class="part4"> 
<img1 id="top"></img> colored image with happy child 
<img2 id="bottom"></img> yellow image with sad child 
</div> 
    < div class="part5"> 
<img1 id="top"></img> colored image with happy child 
<img2 id="bottom"></img> yellow image with sad child 
    </div> 

现在我要显示在第1部分黄色ID形象，当我在part2- PART5 即悬停我不想显示图像与id顶部和底部分别只在第1部分只是图像与黄色

Answer 1

这是有点哈克也许可能不适合你的情况，但由于你只有一个黄色部分，你可以使用父级的悬停来显示黄色，并在实际悬停part1时覆盖它。

.yellow { 
    background: yellow; 
    display: none; 
} 
.parts:hover .yellow { 
    display: block; 
} 
.parts .part1:hover .yellow { 
    display: none; 
} 

DEMO与半尺寸框。 DEMO与全尺寸框。

Answer 2

更新！

现在，如果将光标从part2直接移回到part1，黄色部分会消失。修正使用捕获黄色伪元素的悬停的假透明元素。

---

您需要一个容器元素。

演示在这里：http://codepen.io/abidibo/pen/LEMGQY

HTML代码

<div class="container"> 
    <div class="part1"> 
    <div class="top"></div> 
    <div class="bottom"></div> 
    <div class="fake"></div> 
    </div> 
    <div class="part2"> 
    <div class="top"></div> 
    <div class="bottom"></div> 
    </div> 
    <div class="part3"> 
    <div class="top"></div> 
    <div class="bottom"></div> 
    </div> 
    <div class="part4"> 
    <div class="top"></div> 
    <div class="bottom"></div> 
    </div> 
    <div class="part5"> 
    <div class="top"></div> 
    <div class="bottom"></div> 
    </div> 
</div> 

CSS

.container { 
    position:relative; 
} 
.fake { 
    z-index: 1001; 
    background: transparent; 
} 
div[class^=part] { 
    float: left; 
    width:20%; 
    height:100px; 
    position: relative; 
} 
div[class^=part] > div, .fake { 
    height: 100px; 
    width: 100%; 
    position: absolute; 
} 
div[class^=part]:hover .top { 
    opacity: 0; 
} 
div[class^=part]:hover .bottom { 
    opacity: 1; 
} 
.top { 
    background: blue; 
} 
.bottom { 
    background: red; 
    opacity: 0; 
} 
.part2:hover:before, .part3:hover:before, .part4:hover:before, .part5:hover:before { 
    content: ''; 
    color: #000; 
    position: absolute; 
    left: -100%; 
    width: 100%; 
    height: 100px; 
    background: yellow; 
    z-index: 1000; 
} 
.part3:hover:before { 
    left: -200%; 
} 
.part4:hover:before { 
    left: -300%; 
} 
.part5:hover:before { 
    left: -400%; 
} 

最后，只是一个建议。在同一个文档中使用相同的id属性并不是一种好的做法，实际上是错误的，而是使用类。 IDS应该是唯一的。