How To Change Text Box Content On Hover of a Fixed block? (Other solution didn't work)

Question

So I followed the other topic's solution but the Description I set still doesn't want to appear in the text box.

I already tried this: How To Change Text Box Content On Hover I double checked every class name every bracket in the css I just but still nothing. What could be the problem?

Relevant part of the code:

a {
  text-decoration: none;
}

a:link {
  color: #3ea500;
}

.a-1:hover~.element-1 {
  display: block;
}

.a-2:hover~.element-2 {
  display: block;
}

.a-3:hover~.element-3 {
  display: block;
}

a:hover {
  color: #cc7400;
  font-weight: 700;
}

.desc {
  background-color: green;
  width: 33%;
  position: fixed;
  border-radius: 5px;
  left: 66%;
  top: 180px;
}

<body>
  <div class="desc">
    Description:
    <div class="element-1">hello one</div>
    <div class="element-2">hello two</div>
    <div class="element-3">hello three</div>
  </div>
  <div>
    <ul>
      <li>
        <a class="a-1" href="#" target="_blank">Deepdream generator.</a>
      </li>
      <li>
        <a class="a-2" href="#" target="_blank">Picture Breeder</a>
      </li>
      <li>
        <a class="a-3" href="#" target="_blank">AI guesses what you draw</a>
      </li>
    </ul>
  </div>
</body>

Expected: The text appears in the description Box.

Results: Nothing happens.

Maybe the browser is bad?

`~` is [the general sibling combinator](https://stackoverflow.com/a/10782297/215552). You've change the HTML of the answer such that the elements are no longer siblings. — Heretic Monkey, Jun 05 '19 at 19:55
`a-1:hover ~ .element-1` etc. You simply can not do that because your .a-1 placed below .element-1. See https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator — Itang Sanjana, Jun 05 '19 at 20:02
The rule: X ~ Y => Selects every Y element that is **preceded** by a X element. Your 'targeted' `.element-x` classes precede the 'selecting' classes `.a-x` instead of the other way around. Secondly, when you have corrected that, you will see that the 'targeted' elements are preceded by a `
` (not the ``) and just are not at the same nesting level as their 'selectors'. It will not work this way... — Rene van der Lende, Jun 06 '19 at 13:27

Rene van der Lende · Accepted Answer · 2019-06-06T13:47:17.913

:Hover does not trigger some 'click', 'tap' or 'swipe' event, otherwise you could have used the :target selector (W3Schools on :target). However, have a look at my code and you will see that I made the 'targeted' text a child inside the <a> element and initially hide that.

On the 'hover' the targeted text gets positioned 'absolute' below the 'Description' and display: block'ed. That's basically all that there is to it. Tiny little trick, vanilla CSS and no Javascript required...

And...you will still have your '<ul><li>' structure intact.

When I get stuck on something I always track back and simplify.

Update 1:

When you want the 'targeted' text inside a 'Description' box, just increase the height of that box and it will be placed on top of that when you add z-index: 1 to the .target class...

Update 2:

Search for 'css stacking context' to learn about z-index and how to 'layer' your documents.

a {
  text-decoration: none;
}
a:link, a:visited {
  color: #3ea500;
}
a:hover {
  color: #cc7400;
  font-weight: 700;
}
.desc {
  background-color: green;
  width: 33%;
  position: fixed;
  border-radius: 5px;
  left: 66%;
  top: 180px; height: 38px /*update*/
}

a>.target       { display: none; z-index: 1 /*update*/ }
a:hover>.target { display: block; position: absolute; left: 66%; top: 199px; color: black }

<ul>
    <li><a href="#" target="_blank">Deepdream generator.    <span class="target">hello one  </span></a></li>
    <li><a href="#" target="_blank">Picture Breeder         <span class="target">hello two  </span></a></li>
    <li><a href="#" target="_blank">AI guesses what you draw<span class="target">hello three</span></a></li>
</ul>

<div class="desc">Description</div>

Alternate: apart from the link you already tried: if you don't like the <span> in your <a>, make the 'targeted' elements also a <li> inside the <ul> you already have. Initially hide them and place them elsewhere when its 'selecting' <a> is hovered.

Same result, slightly different code:

a {
  text-decoration: none;
}
a:link, a:visited {
  color: #3ea500;
}
a:hover {
  color: #cc7400;
  font-weight: 700;
}
a:hover {
  color: #cc7400;
  font-weight: 700;
}
.desc {
  background-color: green;
  width: 33%;
  position: fixed;
  border-radius: 5px;
  left: 66%;
  top: 180px;
  height: 38px /*add*/
}

.target            { display: none; z-index: 1 }
li:hover + .target { display: block; position: absolute; left: 66%; top: 199px; color: black }

<ul>
    <li><a href="#" target="_blank">Deepdream generator.</a></li>
    <li class="target">hello one</li>
    <li><a href="#" target="_blank">Picture Breeder</a></li>
    <li class="target">hello two</li>
    <li><a href="#" target="_blank">AI guesses what you draw</a></li>
    <li class="target">hello three</li>
</ul>

<div class="desc">Description</div>

How To Change Text Box Content On Hover of a Fixed block? (Other solution didn't work)

1 Answers1