ホバーに複数の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を減らしました。 :hoverの位置は、absoluteの位置を使用してください。また、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>

ここでの例では、私はあることを、私は質問を理解し何にそれを煮詰めて複雑なようです。私はこれが役立つことを願っていますフィードバックは大歓迎です。