在懸停時顯示多個div

Question

我有4個div和4個圖像，每個圖像都有一個ID。當您懸停第一個div的圖像時，我需要顯示另一個div。

我寫了這段代碼，但只有ID =「insta2」和div ID =「iinsta2」的第一張圖片才起作用。

<style type="text/css"> 

    #insta1{display:none} 
    #insta2{display:none} 
    #insta3{display:none} 
    #insta4{display:none} 

    #iinsta1:hover + #insta1 { 
    display: block; 
    } 
    #iinsta2:hover + #insta2 { 
    display: block; 
    } 
    #iinsta3:hover + #insta3 { 
    display: block; 
    } 
    #iinsta4:hover + #insta4 { 
    display: block; 
    } 
</style> 

和身體：

<tr> 
    <td colspan="3" rowspan="2" style="text-align:center; width:30%"> 
    <div id="insta1"><p> Hover 1 </p></div> 
    <img id="iinsta2" src="url" style="width:100% ; height:auto"> 
    <div id="insta2"> <p> Hover </p></div> 
    </td> 
    <td colspan="4" style="text-align:center; width:40%"> 
    <img id="iinsta1" src="url" style="width:100% ; height:auto"> 
    </td> 
    <td colspan="3" rowspan="2" style="text-align:center; width:30%"> 
    <div id="insta3"><p> Hover 3 </p></div> 
    <img id="iinsta3" src="url" style="width:100% ; height:auto"> 
    <div id="insta4"> <p> Hover 4 </p> </div> 
    </td> 
</tr> 
<tr> 
    <td colspan="4" style="text-align:center; width:40%"> 
    <img id="iinsta4" src="url" style="width:100% ; height:auto"> 
    </td> 
</tr> 

Answer 1

用這樣的方式：

#insta1, 
 
#insta2, 
 
#insta3, 
 
#insta4 { 
 
    display: none; 
 
} 
 
#iinsta1:hover + #insta1, 
 
#iinsta2:hover + #insta2, 
 
#iinsta3:hover + #insta3, 
 
#iinsta4:hover + #insta4 { 
 
    display: block; 
 
}

<table> 
 
    <tr> 
 
    <td colspan="3" rowspan="2" style="text-align:center; width:30%"> 
 
     <div id="insta1"> 
 
     <p>Hover 1</p> 
 
     </div> 
 
     <img id="iinsta2" src="url" style="width:100% ; height:auto"> 
 
     <div id="insta2"> 
 
     <p>Hover</p> 
 
     </div> 
 
    </td> 
 
    <td colspan="4" style="text-align:center; width:40%"> 
 
     <img id="iinsta1" src="url" style="width:100% ; height:auto"> 
 
    </td> 
 
    <td colspan="3" rowspan="2" style="text-align:center; width:30%"> 
 
     <img id="iinsta3" src="url" style="width:100% ; height:auto"> 
 
     <div id="insta3"> 
 
     <p>Hover 3</p> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="4" style="text-align:center; width:40%"> 
 
     <img id="iinsta4" src="url" style="width:100% ; height:auto"> 
 
     <div id="insta4"> 
 
     <p>Hover 4</p> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

的+對象只能與旁邊的兄弟姐妹一起使用。另外，我減少了你的CSS。請使用absolute職位來定位:hover。而且，如果你想保持HTML佈局，你需要爲此使用JavaScript。

Answer 2

img ~ p { 
 
    visibility: hidden; 
 
} 
 

 

 
img:hover ~ p { 
 
    visibility: visible; 
 
}

<table border=1> 
 
    <tr> 
 
    <td> 
 
     <div class="item"> 
 
     <h1>Hover 1</h1> 
 
     <img src="http://placekitten.com/100" /> 
 
     <p>Hover</p> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div class="item"> 
 
     <h1>Hover 1</h1> 
 
     <img src="http://placekitten.com/100" /> 
 
     <p>Hover</p> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div class="item"> 
 
     <h1>Hover 1</h1> 
 
     <img src="http://placekitten.com/100" /> 
 
     <p>Hover</p> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div class="item"> 
 
     <h1>Hover 1</h1> 
 
     <img src="http://placekitten.com/100" /> 
 
     <p>Hover</p> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

這裏的例子看起來很複雜，所以我熬下來，以我的理解問題所在。我希望這有幫助。歡迎反饋。