CSS Hover Over Effect ( CSS pseudo class )


There are many small simple tweaks in CSS that can highly enhance the over all design of a web page. CSS Hover Over Effect is one of them.

The CSS pseudo class which is used to accomplish hover over effect is:

 :hover



YouTube Link: https://www.youtube.com/v/R3weCcjVylo [Watch the Video In Full Screen.]


Note: CSS pseudo classes doesn’t work on Internet Explorer. So while learning this, make sure you are using Chrome or Mozilla Firefox or Apple’s Safari.

We can apply hover over effect to almost any valid html element. Like: anchor tag, tables, lists etc.

Below is the coding for the example discussed in the above video:

 
<html>
 <head><title>Hover Over Effect In CSS2</title>
  <style type="text/css">
 
    li:hover {
        background-color: pink;
        width: 100px;
    }
 
  </style>
 </head>
 <body>
 
   <ul>
    <li>  Microsoft</li>
    <li>  Apple</li>
    <li>  Oracle</li>
   </ul>
 
 </body>
</html>

In the above example, we are applying hover over effect to a unordered list of elements. And we have changed the background color of the list item when the mouse hovers over the list item elements.

Make sure you try this :hover pseudo class with other html elements too. You can really create very good user interface with the help of hover over effect.

One thought on “CSS Hover Over Effect ( CSS pseudo class )”

  1. In the video presentation, at about 2:51 I said semicolon, which is actually colon.

    And sorry for the blurriness of the video from 1:55 to 2:55.. I have provided the exact code that I explain in the video in the above article, so hope that blurriness isn’t a problem for learning.

Leave a Reply to Satish Cancel reply

Your email address will not be published. Required fields are marked *