Change background position when mouse over

msi_333 · **Posted:** 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 {
  width: 800px;
  float: left;
  margin: 0 0 0 0px;
  display: inline
}

#part {
  background-image: url(site_logo.gif);
  background-position: top left;
  background-repeat: no-repeat;
  width: 200px;
  float: left;
}

#part ul {
  padding: 40px 0 0 40px;
  float: left;
  height: 200px;
}

#part li {
  list-style-type: none;
  padding: 7px 0 5px 0;
  float: left;
  display: inline
}

.points {
  background-image: url(dot.gif);
  background-position: bottom left;
  background-repeat: no-repeat;
}

#part img {
  float: left;
}

#part li a {
  display: block;
  float: left;
  background-image: url(arrow.gif);
  background-position: bottom right;
  background-repeat: no-repeat;
  padding: 0 8px 0 0
}

#part li a:visited {
  background-position: bottom right
}

#part li a:hover {
  background-position: top right
}

#part #active {
  background-position: top 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>

 

Change background position when mouse over

Users browsing similar codes