Create Dropdown Hover Effects Using CSS

by Ran Enoch  –  follow on Twitter here

Many developers choose to use JavaScript or jQuery to create simple dropdown hover effects, but the same effect can be achieved in a much more lightweight way by using CSS.

 dropdown2

Join us in our newest publication:

If you want an HTML element to appear when another element is hovered upon, your HTML might look something like this:

< View plain text >
HTML

  1. &lt;div class=&quot;dropdown&quot;&gt;
  2.         &lt;p class=&quot;drop&quot;&gt;Hover Me&lt;/p&gt;
  3.         &lt;div class=&quot;hover&quot;&gt;
  4.             &lt;p&gt;Dropdown Item&lt;/p&gt;
  5.         &lt;/div&gt;
  6.     &lt;/div&gt;

The .hover div is what you’re going to want to appear when the .dropdown div is hovered upon, so it shouldn’t be visible when the page first loads. That can be achieved with the following CSS:

< View plain text >
css

  1. .hover{
  2.  
  3. display: none;
  4.  
  5. }

To make the .hover div appear when .dropdown is hovered upon, you will also need this line of CSS:

< View plain text >
css

  1. .dropdown:hover .hover{
  2.  
  3. display: block;
  4.  
  5. }

That’s all you need to create a simple dropdown hover effect. It can be used to create navigation menus, photo captions that appear upon hover, to enlarge thumbnails upon hover, and more. Experiment with transitions and styling to really make the code your own!

Share and Enjoy !

0Shares
0 0