Switch to full style
HTML code examples
Post a reply

Change background position when mouse over

Sun Dec 04, 2011 2:08 am

Change background position when mouse over, to see the intended idea behind the example below you have to set the images on your root directory.

Code:
<html>
<
head>
<
title>change background position when mouse over.</title>
<
style rel="stylesheet" type="text/css">

.
mainDiv {
  
width800px;
  
floatleft;
  
margin0 0 0 0px;
  
displayinline
}

#part {
  
background-imageurl(site_logo.gif);
  
background-positiontop left;
  
background-repeatno-repeat;
  
width200px;
  
floatleft;
}

#part ul {
  
padding40px 0 0 40px;
  
floatleft;
  
height200px;
}

#part li {
  
list-style-typenone;
  
padding7px 0 5px 0;
  
floatleft;
  
displayinline
}

.
points {
  
background-imageurl(dot.gif);
  
background-positionbottom left;
  
background-repeatno-repeat;
}

#part img {
  
floatleft;
}

#part li a {
  
displayblock;
  
floatleft;
  
background-imageurl(arrow.gif);
  
background-positionbottom right;
  
background-repeatno-repeat;
  
padding0 8px 0 0
}

#part li a:visited {
  
background-positionbottom right
}

#part li a:hover {
  
background-positiontop right
}

#part #active {
  
background-positiontop right
}


</
style>
</
head>
<
body>
    <
div class="mainDiv">
      <
div id="part">
        <
ul>
          <
li class="points"><a href="#" >Link1</a></li>                                                              
          <
li class="points"><a href="#" >Link2</a></li>
          <
li class="points"><a href="#" >Link3</a></li>
          <
li class="points"><a href="#" >Link4</a></li>
          <
li class="points"><a href="#" >Link5</a></li>
          <
li class="points"><a href="#" >Link6</a></li>
        </
ul>
      </
div>
    
    </
div>      
</
body>

</
html>

 




Post a reply
  Related Posts  to : Change background position when mouse over
 Mouse position in C++     -  
 Get Mouse Position using JQuery     -  
 X and Y background position     -  
 setting div background position     -  
 Set position of background image in pixels     -  
 right bottom background image position     -  
 Change the border style on mouse over     -  
 Change the mouse cursor to hand pointer     -  
 change background of the paragraph     -  
 change background color with RGB     -  

Topic Tags

HTML Background