<li> Image background when hover?

HTML & CSS
1

Hi guys

I have a <ul> <li> menu list,
http://coder9.com/css/menu/menu.htm

What I want is when I hover my mouse on the menu list,
It should display this image below as background,
http://coder9.com/css/menu/graphics/hover.gif

Can you show me the right CSS codes for this please.

Thanks in advanced.

2

Listamatic’s float tutorial go to step 5 to see an example of background change on rollover.

3

Thanks for your help man.
But I don’t see it?

Which Tutorial number is that?
What is the right link again?

4

hi,

if im not mistaken the code is:

ul li a:hover { background: url(url of image) no-repeat; display:block }

5

I would NOT wait until :hover to load that image – load it all the time but use background-position to hide it. Pseudo-state (like :hover) declarations for backgrounds do NOT load the image until after you hover it, resulting in a page-load delay.

Some other observations

  1. I’m not sure why you’re changing float direction on hover, unless you’re intentionally trying to make the layout break…

  2. you’re redeclaring values on psuedo-states that you shouldn’t have to. In general you’re saying the same things over and over and over again for no good reason.

  3. there is only one reason to EVER declare a TITLE that’s indentical to the content of the tag it’s on – assigning accesskeys for Opera/Blazer accesskeys menus. Since I don’t see accesskeys…

  4. this isn’t 1998, href=“javascript:” shouldn’t be used anymore.

  5. Not sure why you have both a .active and .current class - but I’d really recommend NOT setting

  6. it helps to turn list-style off when building a menu.

  7. line-height without a fixed font size on a background-image interaction? Just asking for the layout to break for people who need/want things like large fonts/120dpi (win7 medium/125%).

  8. those dividing vertical-breaks are presentation, and as such have no business in your markup in the first place.

  9. attempting to style LI is usually a nightmare, put it all on the anchor.

  10. “navigation” is a bit vague… Something like “mainMenu” might be a bit clearer since every anchor on a page is part of “navigation”. (just part of why I think HTML 5’s “nav” element is useless/pointless bloated idiocy)

  11. If you have to up-path with …/, there’s probably something wrong with how you laid out your directory structure.

  12. odd heights like 31px often waste space in the image file and take longer to render, sticking with multiples of 2/4/8 tends to be better in the long run – also odd line-heights are less consistent cross-browser than even ones.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<title>Test Page</title>
	
<style type="text/css">

body {
	background:#CCC;
}

#mainMenu { 
	list-style:none;
	float:left;
	font:bold 17px/20px arial,helvetica,sans-serif;
	background:url(images/menuBackground.png) top left no-repeat; 
}

#mainMenu li { 
	display:inline;
}

#mainMenu a { 
	float:left;
	padding: 6px 15px 6px 8px; 
	text-decoration: none;
	color:#FFF; 
	background:url(images/mainMenu.png) top right no-repeat; 
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover { 
	background-color:#F80; /* so images off users see something! */
	background-position:bottom right;
}

#mainMenu .selected {
	padding-right:5px;
	background-position:top left;
}

#mainMenu .selected:active,
#mainMenu .selected:focus,
#mainMenu .selected:hover { 
	background-position:bottom left;
}

</style>

</head><body>

  <ul id="mainMenu">
    <li><a href="order.html">Order</a></li>
    <li><a href="#">Subject</a></li>
    <li><a href="#">Study Guides</a></li>
    <li><a href="#">Q&amp;A</a></li>
    <li><a href="#" class="selected">Dissertations</a></li>
    <li class="last"><a href="#">Essays</a></li>
  </ul>
  
</body></html>

Probably all I’d have there. The image would require the dividers be added to it on the right hand side, the ‘normal’ state on top of the ‘hover state’ as a single image.

This uses a more complex sliding doors approach, but shows what I mean about using one image for multiple states. People call it “css sprites” (incorrectly, that’s not a sprite, even if some sprites use the sliding background approach).

Hope this helps.