How to swap the image on hover to get a rollover effect using CSS?
Q.s
How to swap the image on hover to get a rollover effect using CSS?
Ans
Add the Below code in your CSS.
*{
margin:0;
padding:0;
}
ul{
list-style-type:none; /*remove bullets*/
}
li{
display:inline; /*fix IE whitespace in lists bug*/
}
li a:link, li a:visited{
display:block; /*allows anchor to take width and height*/
width:auto; /*equal to image width*/
height:auto;/*equal to image height*/
background:url(”../images/p1_m1.jpg “) 0 0 no-repeat; /*the image*/
text-indent:-2000px; /*moves text out of the way*/
overflow:hidden;
text-decoration:none;
}
li a:link:hover, li a:visited:hover{
background:url(”../images/p2_m1.jpg”) 0 0 no-repeat; /*you can also swap the image on hover to get a rollover effect if desired*/
}
and Add the below tags in your aspx Page
Please note in CSS ../images/p1_m1.jpg,../images/p2_m1.jpg.
../images/p1_m1.jpg - which one you want in First time.
../images/p2_m1.jpg - when you mouseover it swaps the image.
