Whisetter46 Whisetter46 - 4 months ago 7
HTML Question

Text not showing on hover

I'm currently working on creating a website which uses images which, when hovered over, displays a short line of text. This would be similar to what is done on the nowthisnews.com website.

However, I cannot get this to work properly.

Here is a snippet of what I have got so far:



#facebook-menu {
display: none;
}

#facebook {
cursor: pointer;
}

#facebook:hover + #facebook-menu {
display: block;
}

<footer>
<div id="footer"></div>
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<br>
<ul class="list-inline">
<div class="hover">
<img href="" id="facebook" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-128.png" height="39px" width="39px"></div>
</ul>
</div>
</div>
</div>

<div id="facebook-menu">
<font size=5><b>Geeky Pixel</b>
<br><font size=2>
Get all news and updates directly to your Facebook feed.<font size=5>





Can anyone tell me where I am going wrong?

Thanks

Please note: Coding is not my strong point. There are probably many errors here.

Answer

There was a issue in the markup. In order use + #facebook-menu should be a sibling of #facebook. I cleaned up the markup.

Below code should work

  #facebook-menu {
    display: none;
  }
  
  #facebook {
    cursor: pointer;
  }
  
  #facebook:hover + #facebook-menu {
    display: block;
  }
<footer>
  <div id="footer"></div>
  <div class="container">
    <div class="row">
      <div class="col-lg-10 col-lg-offset-1 text-center">
       
            <img href="" id="facebook" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-128.png" height="39px" width="39px">

            <div id="facebook-menu">
                <b>Geeky Pixel</b>
                <p>Get all news and updates directly to your Facebook feed.</p>
            </div>

      </div>
    </div>
  </div>
</footer>
  

Comments