如何在不使用JS的情况下将鼠标悬停在段落的不同部分时显示隐藏的div？

问题描述 投票：0回答：1

我试图将鼠标悬停在段落的一部分上时显示隐藏的 div。段落有两个部分需要悬停效果，每个部分都有自己的 div，以在悬停时显示。但是，我无法让它工作。

  • 当我删除第二个 span 元素和 p 元素时， 悬停效果有效，但我需要两者，以便我可以设置文本样式。
  • 我还尝试将跨度元素的不透明度设置为 0，将悬停的不透明度设置为 1（而不是使用显示），但出现了同样的问题。仅当我删除 p 元素和第二个 span 元素时它才有效。

当然我做错了什么，但我自己无法弄清楚。

我正在寻找最好不涉及JS的解决方案。

我有以下 HTML 代码：

<body>
    <div class="div1">
      <p class="show">
      Lorem ipsum<span class="txt1"> dolor</span> sit amet,<span class="txt2"> consectetur</span> adipiscing elit.
      </p>
      <div class="hide1">
        <table>
          <tr>
            <td rowspan="2"><img src="NULL" alt="test"></td>
            <td><a href="">Hidden Text 1&gt;</a></td>
          </tr>
          <tr>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales.</td>
          </tr>
        </table>
      </div>
      <div class="hide2">
        <table>
          <tr>
            <td rowspan="2"><img src="NULL" alt="logo"></td>
            <td><a href="">Hidden Text 2 </a></td>
          </tr>
          <tr>
            <td>Duis tellus ligula, volutpat et cursus in, euismod in magna.</td>
          </tr>
        </table>
      </div>
  <!-- there will be a form here */ -->
  </div>
</body>

使用以下 CSS 代码：

body {
    background-color: #eee;
}
.div1 {
    height: 30px;
    padding: 50px 0 60px 0;
    margin: auto;
    position: relative;
    text-align: center;
}
.show {
    padding: 0 0 15px 0;
    margin: 0;
    }
.hide1 {
    display:none;
    opacity:0;
    background-color: #eee;
    border: 1px #666 solid;
}
.hide2 {
    display: none;
    opacity:1;
    background-color: #eee;
    border: 1px #666 solid;
}
.txt1, .txt2 {
    font-weight: bold;
    color:#bc2f00;
}
.txt1:hover + .hide1 {
    opacity: 1;
    display: block !important;
}
.txt2:hover + .hide2 {
    opacity: 1;
    display: block !important;
}
html css hide display opacity
1个回答
0
投票

我想说你应该重建你的 HTML，使得要悬停的文本和隐藏块重合并位于单个父项下。

看这个例子：

body {
  background-color: #eee;
}

.div1 {
  height: 30px;
  padding: 50px 0 60px 0;
  margin: auto;
  position: relative;
  text-align: center;
}

.show {
  padding: 0 0 15px 0;
  margin: 0;
}

.hide1 {
  display: none;
  opacity: 0;
  background-color: #eee;
  border: 1px #666 solid;
}

.hide2 {
  display: none;
  opacity: 1;
  background-color: #eee;
  border: 1px #666 solid;
}

.txt1,
.txt2 {
  font-weight: bold;
  color: #bc2f00;
}

.div1 .show .txt1:hover~.hide1 {
  display: block;
  background: blue;
  cursor: pointer;
  opacity: 1;
}

.div1 .show .txt2:hover~.hide2 {
  display: block;
  opacity: 1;
  display: block !important;
}
<div class="div1">
  <div class="show">
    <p class="txt1">Hover over me</p>
    <div class="hide1">
      <table>
        <tr>
          <td rowspan="2"><img src="NULL" alt="test"></td>
          <td><a href="">Hidden Text 1&gt;</a></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales.</td>
        </tr>
      </table>
    </div>

    <p class="txt2">Or over me</p>
    <div class="hide2">
      <table>
        <tr>
          <td rowspan="2"><img src="NULL" alt="logo"></td>
          <td><a href="">Hidden Text 2 </a></td>
        </tr>
        <tr>
          <td>Duis tellus ligula, volutpat et cursus in, euismod in magna.</td>
        </tr>
      </table>
    </div>
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.