CSS a:hover image swap 1

[Isadore]

I'm no expert at CSS (and I have done quite a bit of research on this) so posting here to see if I can't pick up an idea or two (thanks in advance).

I am running a CSS menu system with the following code:

/*----- MENU CSS 
------------------------------------*/
#nav, #nav ul { /* all lists */
  padding: 0;
  margin: 0;
  list-style: none;
  float : left;
  width : 11em;
  border :0;
}
#nav li { /* all list items */
background:url("[URL unfurl="true"]http://www.blogblog.com/rounders3/icon_arrow_sm.gif")[/URL] no-repeat 2px .25em;
  position : relative;
  float : left;
  line-height : 1.25em;
  margin-bottom : 0;
  width: 11em;
  border :0;
}
#nav li ul { /* second-level lists */
 position : absolute;
 left: -999em;
 margin-left : -13.3em;
 margin-top : -1em; 
 border-bottom:0px dotted #345;
 line-height:1.4em;
 background:#234;
}
#nav li ul ul { /* third-and-above-level lists */
  left: -999em;
  margin-left : -13.3em;
  margin-top : -1em;
  background:#234;
}
#nav li a {
  width: 11em;
  display : block;
  color : #CCCC99;
  text-decoration : none;
  background:#234;
  padding : 0 0.5em;
}
#nav li a:hover {
  color : #00FFFF;
  background:#234 
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
  left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
  left: auto;
}

The menu behaves well. What I would like to accomplish is a simple image reversal on mouse-over. When I change the #nav li a:hover part of the code as follows:

From..

#nav li a:hover {
  color : #00FFFF;
  background:#234 

..to..

#nav li a:hover {
  color : #00FFFF;
  background:url("[URL unfurl="true"]http://www.abc.com/myimages/imageA.jpg")[/URL] no-repeat 2px .25em;

..I can see the image on mouse over but the image is staying just to the right of the original image. Not having any luck making it appear as a swapping of images.

You can see this effect on this page (look under "Primary References" for the effect - just mouse over a menu item). The hover image appears but just off to the right of the original. thanks.

 

[mbrooks]

Besides specifying the height and width of the background image. Do this as well.

background-image: url( [URL unfurl="true"]http://domain.com/image.jpg[/URL] );

M. Brooks

http://mbrooks.info

 

[Vragabond]

Your original background image is on the <li> element, while the changed one is on the <a> element. So you will never get them to align, since anchor does not even exist where the background image of the <li> element is. All you need to do is apply the background to the li element instead of the anchor one:

#nav li:hover,
#nav li.sfhover {
  background:url("image.jpg") no-repeat 2px .25em;
}

That being said and taking into cosideration that your image is pretty small, it is still a better idea to preform the background change as described here:

http://wellstyled.com/css-nopreload-rollovers.html

 

[Isadore]

mbrooks and Vragabond: thanks a million! Really do appreciate your help on this.

 

[Isadore]

Vragabond: One last question; and no worries if you don't have time to take a look.

I was VERY impressed with the single image relocaton technique. In IE there was a 2-3 second delay using the previous technique (to replace image by mouse over) but now in all browsers its instantaneous.

The ony problem was I had to make the image a little longer then 2 (with background add) and skew the mouse over image to the bottom (-3px) and to the left 1 px.

You can see this effect under "Categories". The image under "Primary References" is now using the single image relocate method.

http://www.3dbiochem.blogspot.com

Thanks again for your help; this was a very useful exercise on this end.