如何通過將圖像懸停在另一個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應該是唯一的。