Html Question posted in
Some basic documentation can be found here.

Html – How to show hidden divs when hovering over different parts of a paragraph without using JS?

I am trying to show a hidden div when hovering over part of a paragraph. There are two parts of paragraph that need a hover-effect with each its own div to show when hovered over. However, I am unable to get it working.

  • When I remove the second span-element and the p-element, the
    hover-effect works, but I need both so I can style the text.
  • I also tried setting opacity to 0 for the span-element and 1 for the hover (instead of using display), but same problem occurs. It only works when I remove the p-element and second span-element.

Certainly I am doing something wrong, but I can’t figure it out myself.

I am looking for solutions that preferably do not involve JS.

I have the following HTML code:

<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>

With the following CSS code:

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;
}
Tags:

2

Answers


  1. 0

    I’d say you should reconstruct your HTML such that the text to be hovered and the hidden block are coincident and lie under a single parent.

    See this example:

    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>
    Login or Signup to reply.
  2. 0

    You can’t select a parent sibling with hover but you can achieve something similar with the css :has() selector as below by checking if the parent div has a hovered element to then act on this element or another child element.

    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:has(.txt1:hover)  .hide1 {
  opacity: 1;
  display: block !important;
}
.div1:has(.txt2:hover)  .hide2 {
  opacity: 1;
  display: block !important;
}
      <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search