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>

这里的例子似乎很复杂，所以我把它归结为我理解的问题。我希望这有帮助。欢迎反馈。

在悬停时显示几个div

2 个答案: