Css - How do I show some text on hover

VishalC
August 4, 2023
211 views
0 votes
2 Answers

I am a newbie to web development and I’m facing an issue to complete my project. When I hover a text I want a paragraph or div to pop-up.

The code which I would be sharing is not my real project but is a copy of my real project error which I am facing. I tried the following tricks.

I tried making the "li#description" visiblity to hidden and on hover

li#hover:hover + li#description{
  visibility: visible;
}
li#description{
  display:none;
}

This didn’t work and when on hover I tried changing it to inline even this didn’t work.

Everything is similar you would find the name of the elements and the CSS not so good but it is just a copy

li {
  list-style: none;
  /* list-style: none; */
}

.hover-list {
  display: flex;
  align-items: center;
  justify-content: center;
}

li#hover {
  text-align: center;
  background-color: darkslategray;
  display: inline;
  padding: 10px;
  border-radius: 50px;
  color: white;
}

li#description {
  border: 2px solid black;
  text-align: center;
  padding: 10px;
  font-size: large;
  background-color: darkslategrey;
  color: white;
}

<ul class="hover-list">

  <li id="hover">

    Hover Me!!

  </li>

</ul>

<div id="description-div">

  <ul class="description-list">

    <li id="description">

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum consequatur veritatis facilis est voluptas obcaecati similique illo reiciendis a, eaque minima ullam totam dolor molestias officiis quia suscipit enim temporibus fugiat nulla possimus. Ut
      recusandae laudantium in rem, nulla corrupti placeat ipsa assumenda consequatur et eveniet inventore voluptates officiis facilis id? Qui suscipit non maiores corporis quas adipisci dicta in enim amet magnam, repellendus, iusto recusandae laudantium
      sit illo nemo delectus at officia saepe nihil obcaecati! Asperiores deserunt enim excepturi id dolorum hic expedita explicabo? Nesciunt, est ipsam! Velit in nostrum sunt consectetur laudantium ad inventore labore libero ducimus voluptates.

    </li>

  </ul>

</div>

Tags: css html

Answers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
        }

        .hover-list {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        li#hover {
            text-align: center;
            background-color: darkslategray;
            display: inline;
            padding: 10px;
            border-radius: 50px;
            color: white;
            position: relative; /* Added */
        }

        li#hover:hover::after { /* Added */
            content: attr(data-description);
            display: block;
            position: absolute;
            bottom: -100%; /* Position the pop-up above the hover element */
            left: 50%;
            transform: translateX(-50%);
            width: 300px;
            padding: 10px;
            border: 2px solid black;
            background-color: darkslategrey;
            color: white;
            font-size: large;
            opacity: 1;
            visibility: visible;
            transition: opacity 0.3s, visibility 0.3s;
        }

        li#hover::after { /* Initial styles for the pop-up */
            content: attr(data-description);
            display: block;
            position: absolute;
            bottom: -100%;
            left: 50%;
            transform: translateX(-50%);
            width: 300px;
            padding: 10px;
            border: 2px solid black;
            background-color: darkslategrey;
            color: white;
            font-size: large;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
        }
    </style>
</head>
<body>
    <ul class="hover-list">
        <li id="hover" data-description="Lorem ipsum dolor sit amet..."> <!-- Added data-description attribute -->
            Hover Me!!
        </li>
    </ul>
</body>
</html>

You can keep your HTML as is and use some CSS trickery:

First set li#description to have display none. That way it doesn’t take up any space when its not visible.

Then use .hover-list:has(#hover:hover) + #description-div li#description{ display:block }

:has checks to see if any child match the selector, in this case checking to see if it has an element with the ID of hover that is being hovered. Then + will grab the next adjacement element, and then simply access the child with li#description and set it to having display block.

li {
  list-style: none;
  /* list-style: none; */
}

.hover-list {
  display: flex;
  align-items: center;
  justify-content: center;
}

li#hover {
  text-align: center;
  background-color: darkslategray;
  display: inline;
  padding: 10px;
  border-radius: 50px;
  color: white;
}

li#description {
  border: 2px solid black;
  text-align: center;
  padding: 10px;
  font-size: large;
  background-color: darkslategrey;
  color: white;
  display:none
}

.hover-list:has(#hover:hover) + #description-div li#description{
  display:block
}

<ul class="hover-list">

  <li id="hover">

    Hover Me!!

  </li>

</ul>

<div id="description-div">

  <ul class="description-list">

    <li id="description">

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum consequatur veritatis facilis est voluptas obcaecati similique illo reiciendis a, eaque minima ullam totam dolor molestias officiis quia suscipit enim temporibus fugiat nulla possimus. Ut
      recusandae laudantium in rem, nulla corrupti placeat ipsa assumenda consequatur et eveniet inventore voluptates officiis facilis id? Qui suscipit non maiores corporis quas adipisci dicta in enim amet magnam, repellendus, iusto recusandae laudantium
      sit illo nemo delectus at officia saepe nihil obcaecati! Asperiores deserunt enim excepturi id dolorum hic expedita explicabo? Nesciunt, est ipsam! Velit in nostrum sunt consectetur laudantium ad inventore labore libero ducimus voluptates.

    </li>

  </ul>

</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Css – How do I show some text on hover

Answers