List-style-image: can you make it a hover?

HTML & CSS
1

Hi, I was just curious to know if you could make your list-style-images hover over a different image, if not what would be an alternative? But if it can be done can anyone help me get started on the right path? thanks!

2

Alright well there are a few things to ignore in the code, the </script> must of got copied into there because I just noticed it. I know about the 100px padding, but I’m guessing the key focus of this was lost or I didn’t really clearly explain the matter better. I did also want the span to be ignore, it was clearly servicing a purpose to indent the text but in the wrong way, I was intended to using padding left for the anchor and I also know that it shouldn’t be in a table to begin with, clearly I’d put this into a div and I do realize the inheritance to shorten up the code.

I was just thinking if there was a better way to do this and when I started this thread, I was trying to use the list-style-image as a hover, but using it as a background is just as effective, thanks for your help.

3

I’ll echo all that Stevie just said plus the following :slight_smile:

#sidenavmnu { width: 100%; background-color: #000; padding: 100px; }

width:100% + 100px padding = 100% + 200px wide

You can’t add padding to 100% and you would rarely add padding to the table element anyway. You could add padding to the td or an inner element instead but as Stevie said the table is a wasted element anyway.

I’m also guessing that you added the span so that you could move the text away from the background image but you could have done this by simply adding left padding to the anchor instead (or using a text-indent.)

4

I did list-style-image, then list-style-image li:hover and it worked, but I’m pretty sure IE isn’t gonna allow this, since :hover has to be attached to a. Nevertheless, I’ve done a bit and I would like to know what you think of the following code, also if there is a way to shorten it.


<html>
<head>
<title></title>

<style type="text/css">

#sidenavmnu { width: 100%; background-color: #000; padding: 100px; }
#sidenavmnu ul { list-style-type: none; margin: 0; padding: 0; margin-left: 50px; }
#sidenavmnu li a { color: #fff; text-decoration: none; background: url(redbtn.gif) no-repeat; }
#sidenavmnu li a:hover { background: url(yellowbtn.gif) no-repeat; }
#sidenavmnu li a span { margin-left: 20px; }
</style>
</script>
</head>

<body>

<table border="0" id="sidenavmnu">
	<tr>
		<td>	
			<ul>
				<li><a href=""><span>Tennis</span></a></li>
				<li><a href=""><span>Tennis</span></a></li>
			</ul>
		</td>
	</tr>
</table>
</body>
</html>
5

A few thoughts:

  • None of that should be in a table.
  • I can’t see the point of the <span> at all.
  • Putting the hover on the <a> makes it IE6 friendly, which is good.
  • You’ve got a random </script> making a nuisance of itself.
  • You don’t need to repeat “no-repeat” in the :hover line, it will be carried over from the line above if you don’t set it.
6

The list-style image is hard to style cross browser so what you are doing is a better alternative.:wink:

Sorry about all the other comments but you did actually ask :slight_smile:

I’ve done a bit and I would like to know what you think of the following code, also if there is a way to shorten it.