Change background position when mouse over

DrRakha

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>

 

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka

Change background position when mouse over

Topic Tags