Jump to content

Using The :hover Pseudo Class To Toggle Visibility


skaterdav85
 Share

Recommended Posts

I've heard of people using the hover pseudo class to toggle the visibility of things such as in drop down menus in navigations, rather than using JS. I'm trying to learn that but im not quite sure how. Here is my HTML. I want to hover over the anchor Portfolio and toggle the display of the ul right below it.

<a href="">Portfolio</a><ul class="portfolio-types" id="portfolio-types">      <li><a href="">Shorts</a></li>      <li><a href="">Music Videos</a></li>      <li><a href="">Commercials</a></li>      <li><a href="">Still</a></li> </ul>               	 

  • Like 2
Link to comment
Share on other sites

Here's what you can try:

<!doctype html><html><head><title>Drop Down</title><style type="text/css">#portfolio {display: inline-block;visibility: visible;}#portfolio-types {visibility: hidden;}#portfolio:hover ~ #portfolio-types {visibility: visible;display: inline;} </style> </head><body><a id="portfolio" href="">Portfolio<ul class="portfolio-types" id="portfolio-types">	  <li><a href="">Shorts</a></li>	  <li><a href="">Music Videos</a></li>	  <li><a href="">Commercials</a></li>	  <li><a href="">Still</a></li> </ul>  </a></body></html>

The only problem is when mousing out from Portfolio, the ul list disappears. Perhaps some others can suggest more options. :)

Edited by Don E
Link to comment
Share on other sites

Actually that is a invalid way to use it, an inline element cannot surround a block element, it should be

<a id="portfolio" href="">Portfolio</a><ul id="portfolio-types">		  <li><a href="">Shorts</a></li>		  <li><a href="">Music Videos</a></li>		  <li><a href="">Commercials</a></li>		  <li><a href="">Still</a></li> </ul>  

the ~ targets sibling elements only at any location, where as + would only target the sibling element directly after it.

Edited by dsonesuk
  • Like 1
Link to comment
Share on other sites

interesting. thanks. i did not know about that in CSS 3. I guess I could use the :hover pseudo class on all the anchors within #portfolio-types to make the menu visible when the user hovers over each of those links, but now that i think about it, I should probably just use JS since more people have JS enabled than the number of people with browsers that support CSS 3.

Link to comment
Share on other sites

I still haven't understood this properly yet but I came across grc.com's drop down menus and they were done without JavaScript. Hope it helps:http://www.grc.com/menu2/invitro.htm

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...