Html and Css Hover Functions

Question

Hi I am new to html and css and I would like to display a text on the right side when I hover the mouse over another text which is on the left side. I have a list of texts displayed on the left side here is the cod for it

<ul>
    <li id="what">What Is Eco Flash?</li>
    <br>
    <li id="water">We Coneserve Water!</li>
    <br>
    <li id="chemicals">Chemicals Reduction!</a>
    </li>
    <br>
    <li id="waste">No Waste-Water Run Off</li>
</ul>

and this is my css code for the list to be displayed on the left side

width:25%;
text-align: left;
font-family: 'Copperplate Gothic Light';
font-size: 20px;
font-style: normal;
font-variant: small-caps;
font-weight: bold;
text-decoration: none;
margin:.2em;
display: list-item;

now that I want to add is a small explanation text for each item in the list to appear on the right side when I hover over them.

I am new to the html and css and I have tried spam but it appears right under the text. How can I get the explanation text to appear on the right?

Thanks!

Chizzle · Accepted Answer · 2015-11-12 15:40:32Z

2

I like to use :hover on the parent and then display the child node like this:

Fiddle

ul li .description{
  display: none;
}
ul li:hover .description{
  display: inline;
}

<ul>
  <li id="what">What Is Eco Flash? <span class="description">Boom a description</span></li>
  <li id="water">We Coneserve Water! <span class="description">Boom a description again</span></li>
  <li id="chemicals">Chemicals Reduction!</li>
  <li id="waste">No Waste-Water Run Off</li>
</ul>

answered Nov 12, 2015 at 15:40

Chizzle

1,7151 gold badge18 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jeffjenx · Accepted Answer · 2015-11-12 15:42:13Z

1

If you don't want to add extra markup to your list elements, you could use a data- attribute and the :after pseudo-class in CSS. I realize this may be a bit more advanced that what you're looking for, but it might be good for future visitors:

li:hover:after {
  content: attr(data-explanation);
  margin-left: 1em;
}

<ul>
    <li id="what" data-explanation="My explanation">What Is Eco Flash?</li>
    <li id="water">We Coneserve Water!</li>
    <li id="chemicals">Chemicals Reduction!</li>
    <li id="waste">No Waste-Water Run Off</li>
</ul>

answered Nov 12, 2015 at 15:42

jeffjenx

17.6k6 gold badges63 silver badges104 bronze badges

Comments

Curtis · Accepted Answer · 2015-11-12 15:30:56Z

0

You could add a new element to the li:

<li id="water">
   We Coneserve Water!
   <small>Explanation...</small>
</li>

Which is hidden by default:

li small{
   display:none;
}

Then display it when the li is hovered over:

li:hover small{
   display:inline;
}

answered Nov 12, 2015 at 15:30

Curtis

104k69 gold badges280 silver badges359 bronze badges

Collectives™ on Stack Overflow

Html and Css Hover Functions

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related