Jump to content
skaterdav85

Using The :hover Pseudo Class To Toggle Visibility

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

interesting. I wasn't sure if there was a way to do it without having to place the list within the anchor, but maybe you have to. thanks! what does the ~ mean in CSS? Ive never seen that.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

My mistake. I thought it was a parent - child relationship in order for the above to work. It's actually SIBLING. Thanks dsonesuk for the heads up.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...