Total members 11796 |It is currently Sun Sep 15, 2019 10:22 pm Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka





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>

 





Author:
Mastermind
User avatar Posts: 2707
Have thanks: 74 time
Post new topic Reply to topic  [ 1 post ] 

  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     -  
 right bottom background image position     -  
 Set position of background image in pixels     -  
 Change the border style on mouse over     -  
 Change the mouse cursor to hand pointer     -  
 change background color with RGB     -  
 change background of the paragraph     -  



Topic Tags

HTML Background






Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com