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 {
        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;
    }

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

Solution

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>