How to create hover effect in CSS

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

Adding hover effect in menu isn’t a big deal for web developers but novice DHTML enthusiasts, who are in phase of learning the art of web designing might need a basic tutorial to know how to create hover menu in CSS.

Hover or Mouseover is an event that’s triggered when mouse is moved over an item which could be an anchor text, button or a simple text.

Before we go in detail, have a look at what we’ll get at the end of this tutorial. Here is a live demo.

Lets learn to create a simple, but awesome menu with smooth hover effect using only CSS,

1. In the HTML portion of the code, we’ve a div that encapsulates 4 HTML anchors. These anchors are menu items and link to 4 different webpages, as you commonly see in website menus.

The id of div is cover_hover_items.


<div id='cover_hover_items'>
 <a href='#home'>HOME</a>
 <a href='#about'>ABOUT</a>
 <a href='#works'>WORKS</a>
 <a href='#contact'>CONTACT</a>
</div>

2. In the CSS part of code, we’ve first stylized the div, menu items and then we have included the code that handles the hover effect on menu items.

On hover, the background changes and the menu-items takes an awesome look with curved radius.

<style>

#cover_hover_items /* style for div with menu items */
 { 
 width:400px; /* set div length */
 background:#3090c9; /* set div background color */
 font-family:Tahoma,Verdana,Arial; /* set font type for div content */
 font-size:12px; /* set font size for div content */
 padding:10px; /* padding for div i.e space from border */
 text-align:center; /* alignment for div content */
 } 

#cover_hover_items a /* style for anchor text */
 { 
 text-decoration:none; /* removing underline beneath text */
 color:white; /* set color to text */
 margin:10px; /* set spacing between menu items */
 padding:5px; /* set padding for each menu items */
 padding-left:10px; /* increase padding on left for appearance */
 padding-right:10px; /* increase padding on right for appearance */
 -webkit-border-radius:3px; /* curve edges for chrome,safari browser */
 -moz-border-radius:3px; /* curve edges for mozilla browser */
 border-radius:3px; /* default code for curve edges in css3 */
 } 

#cover_hover_items a:hover /* CSS code executed on hover */
 { 
 background:#28719C; /* change background color on hover */
 } 

</style>

With a slight modification to the stylesheet code, you can further boost the appearance of menu to give it a much richer GUI on hovers.

You can alter the color codes, add gradients to amplify and create a more visually appealing hover menu in CSS.

blog comments powered by Disqus