CODEWITHSUNDEEP
htmlcsshovermouseover
fjw
fjw

Reputation: 107

How to show a text when hovering?

I have a footer in which I have different icons for my social media. Now, I want to create a hover effect, which displays the name of hovered icons.

For example: My mouse is over the facebook icon, and then the text 'Facebook' should come up in a div, located in a div below!

I know how to create this, however, I don't know how I display these names in the same div at the exact same place. How can I do this? 

<div id="footer1" style="position: fixed; bottom: 0;">
    <div class="content-wrapper">
      <div class="ft-div-left"> </div>
      <div class="ft-div-right">
        <p></p>
      </div>
      <div class="ft-div-middle">
        <center>
          <p>
            <center>
              <a href="" style="text-decoration:none; color:white;"><span class="" style="color: white;"></span></a> 
              <a href=""  style="text-decoration:none; color:white;"><span class="" style="color: white;"></span></a> 
              <a href="" style="text-decoration:none; color:white;"><span class="icon-stumbleupon3" id="issuu" style="color: white;"></span></a> 
              <a href="" style="text-decoration:none; color:white;"><span class ="icon-twitter3"></span></a>
              </br>
              <br>
              <br>
              <span style="font-family:'Open Sans',sans-serif; font-size:11px; color:grey;">&copy; 2014. All Rights Reserved.</span>
            </center>
          </p>
        </center>
      </div>
      <div id="hoverText">
         <span>Here goes the text</span>
      </div>
    </div>
  </div>

Upvotes: 7

Views: 44575

Answers (2)

osyra42
osyra42

Reputation: 638

I personally use the title="" tooltip inside whatever tag I am using. 

<div id="hoverText">
     <span title="hover text">Here goes the text</span>
</div>

This title="" tooltip seem to work about anywhere and on anything.

Upvotes: 21

YourFriend
YourFriend

Reputation: 410

I'm assuming a CSS only answer was what you are looking for. You can do this with CSS using visibility and ofcourse :hover

Here's the Jsfiddle

Example:

Html-

            <div id="facebookicon">
                <img src="https://www.facebookbrand.com/img/assets/asset.f.logo.lg.png"> </img>
                </div>
            <div id="onhoverfb">Follow Us</div>

CSS - 

            #onhoverfb{
                visibility: hidden;
            }
            #facebookicon:hover ~ #onhoverfb{
                visibility: visible;
            }

Remember to set the :hover on the div that is going to be hovered over.

Extra: You can always add the css transition property to have the hover appear more smoothly. Like a fade in.

Upvotes: 1

Related Questions