将鼠标悬停在ID显示其他元素ID的元素

Question

Soo当我悬停在图标ID 1时，我有内部图标元素我想显示容器与文本ID 1，我想压缩代码。并且只使用CSS来完成。

写了类似的东西。它的作品，但它不够紧凑。你能帮我用CSS吗？

<div class="row icongraphics"> 
    <div class="col16" id="id_1"> 
     <div class="icon-area"> 
      <img src=""> 
     </div> 
     <p>zzz</p> 
    </div> 
    <div class="col16" id="id_2"> 
     <div class="icon-area"> 
      <img src=""> 
     </div> 
     <p>zzz</p> 
    </div> 

    <div class="col16 active" id="id_3"> 
     <div class="icon-area"> 
      <img src=""> 
     </div> 
     <p>xxx</p> 
    </div> 

    <div class="col16" id="id_4"> 
     <div class="icon-area"> 
      <img src=""> 
     </div> 
     <p>xxx</b></p> 
    </div> 

    <div class="col16" id="id_5"> 
     <div class="icon-area"> 
      <img src=""> 
     </div> 
     <p>xxx</p> 
    </div> 

    <div class="col16" id="id_6"> 
     <div class="icon-area"> 
      <img src=""> 
     </div> 
     <p>xxxx</b></p> 
    </div> 
    <div class="clearfix"></div> 

    <div class="text"> 
     <span id="tid_1" >text1 </span> 
     <span id="tid_2" >text2</span> 
     <span id="tid_3" >text3</span> 
     <span id="tid_4" >text4</span> 
     <span id="tid_5" >text5</span> 
     <span id="tid_6" >text6</span> 
    </div> 

    <div class="clearfix"></div> 
</div> 

和CSS

 .col16 { 
     width: 14.165%; 
     float: left; 
     padding: 0 15px;} 


     #tid_1,#tid_2,#tid_3,#tid_4,#tid_5,#tid_6 { 
     font-size: 17px; 
     display: none; 
    } 
    .text { 
     display: block; 
     height: 40px; 

    } 
    [id^="id"]:hover b{ 
     color:#006eb8; 
    } 
    #id_1:hover ~ .text > #tid_1 { 
     display: block; 

    } 
     #id_2:hover ~ .text > #tid_2 { 
     display: block; 
    } 
     #id_3:hover ~ .text > #tid_3 { 
     display: block; 
    } 
     #id_4:hover ~ .text > #tid_4 { 
     display: block; 
    } 
     #id_5:hover ~ .text > #tid_5 { 
     display: block; 
    } 
     #id_6:hover ~ .text > #tid_6 { 
     display: block; 
    }` 

Answer 1

试试这个：

#id_1:hover ~ .text > #tid_1, 
#id_2:hover ~ .text > #tid_2, 
#id_3:hover ~ .text > #tid_3, 
#id_4:hover ~ .text > #tid_4, 
#id_5:hover ~ .text > #tid_5, 
#id_6:hover ~ .text > #tid_6 
{display: block;}