Question

所以当我将鼠标悬停在图标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;}

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

1 个答案: