CSS Hover Over Effect ( CSS pseudo class )

Advertisement:


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

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<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.

No related posts.







Get FREE blog updates to your email inbox. Enter your email ID and subscribe:

Do not forget to click the verification link in your email, after subscribing.
--Thanks for your support
Posted by

Start Making Money From Your Programming Skills


( Free ebook )
ebook cover
  • Subscribe to Technotip.com blog update and you will be able to download "Tips, Tricks and Strategies to Make Money Online" eBook for free.
  • You will also receive tips to improve your programming skills, and strategies to make money from your programming skills. We will also send useful resources for learning and building your application.
  • You can also make money with us, by just recommending our website to your friends and family. You will get complete strategy for making $300 and more in the ebook that we will send you - once you subscribe to our free blog update using the below form..

2 Responses to “CSS Hover Over Effect ( CSS pseudo class )”

  1. Satish on July 26th, 2010 at 10:51 pm

    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.

  2. CSS Hover Over Effect On HTML Table: pseudo class on March 24th, 2011 at 1:15 am

    [...] Related: You may also like: CSS Hover Over Effect on Lists [...]

Leave a Reply