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

Html – Problem with CSS, how to make text appear on hover?

I want several text links that when they are hovered over a text is displayed below in a DIV.
For example if text called Ice cream is hovered upon with mouse then below in DIV a text is displayed about Ice cream. Another text near the Ice cream is Bananas, and if it is however the same DIV instead displays text about Bananas. I need to be able to make several of those. And the link text and the DIV with result text has to be on different areas of the page, meaning they shouldn’t need to be placed on same DIV.

Something close to this:

.hide {
  display: none;
  border: solid #ff8900 2px;
  border-radius: 20px;
  padding: 20px;
}

.outro:hover .hide {
  display: block;
  color: #474747;
}
<div class="outro">
  <div id="info-logo">
    <img src="https://picsum.photos/24/20" width="24" height="20">
  </div>
  <p>Know more</p>
  <div class="hide">
    <p>This is the big text block I am trying to copy</p>
  </div>
</div>

Only this has link and resulting DIV all inside, they should be separate, and need to be able to have several links with several preset texts that show up on hover.

Preferably all in CSS without JS. Thanks.

Code I find is nested, need separate, with many options of preset text.

Tags:

2

Answers


  1. 0

    I am not sure if this can be done with CSS but you can easily do it with js:

    // The ice cream text you hover over
const iceCreamHoverText = document.getElementById("ID OF ELEMENT");
// The text that shows when hovered over
const iceCreamShowText = document.getElementById("ID OF ELEMENT");

iceCreamHoverText.addEventListener('mouseenter', function() {
    iceCreamShowText.style.visbility = 'visible';

});

iceCreamHoverText.addEventListener('mouseleave', function() {
    iceCreamShowText.style.visibility = 'hidden';
});

    You can add this in a script tag embedded into the html page or as a seperate file you can link. make sure to change the ID’s to the actual ids

    Login or Signup to reply.
  2. 0

    Without nesting the link and the DIV:

    <!-- Link 1 -->
<a href="#" class="hover-link" id="ice-cream-link">Ice cream</a>

<!-- Link 2 -->
<a href="#" class="hover-link" id="bananas-link">Bananas</a>

<!-- DIV to display the text -->
<div class="hover-text">
  <div id="ice-cream-text">This is the text about Ice cream.</div>
  <div id="bananas-text">This is the text about Bananas.</div>
</div>

    and the CSS:

    .hover-link {
  text-decoration: none;
  color: #337ab7;
}

.hover-link:hover + .hover-text > div {
  display: block;
}

.hover-text {
  position: absolute; /* or relative, depending on your layout */
  top: 20px; /* adjust the position as needed */
  left: 0;
  display: none;
}

.hover-text > div {
  display: none;
}

#ice-cream-link:hover ~ .hover-text > #ice-cream-text {
  display: block;
}

#bananas-link:hover ~ .hover-text > #bananas-text {
  display: block;
}

    Now whenever you hover on the icecream or banana Text, a separate div containing your given text about icecream or banana appears.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search