Css rollover bullet image in menu

doze · February 16, 2006, 1:12pm

Hi,

I’m making menuitems like this. Is it possible to make the bullet image have rollover change when users hover the links using only css?

What I have now is that IE has a link only in the bullet where Firefox is linking the whole thing correctly, but none of the tested browsers change the bullet image…

I’ve gone through few tutos about css rollovers, but haven’t found anything suitable for my needs.

Any help is much appreciated.

EDIT: The menu items might be different in width, so I cant have the whole item background in one image and use backround-position. I have to be able to just change the bullet picture…

EDIT2: This is what I’m trying to achieve, if it’s not clear. Just without the javascript. Possible?

BonRouge · February 16, 2006, 3:39pm

See if this helps…http://bonrouge.com/br.php?page=rollover3

doze · February 16, 2006, 9:29pm

Sorry, but I can’t figure out how that would help. Though I have looked into Paul’s “Disjointed rollover effects”, and I think this might be the solution, but I find it hard to make it work…

cydewaze · February 16, 2006, 9:56pm

Perhaps you can make the whole image a background image, then use a:hover to swap it for a different background image?

EDIT: Ahh, I see that’s what you’re trying to do (peeked at the code), but instead of having the background image on #menu_bullet try to use it on #menu_bullet a:link, #menu_bullet a:visited.

I think the way you have it, the hover image is underneath the regular image. You could try adding z-index: 2 to the hover image, but I’m not sure if z-index causes browser compatibility issues or not.

system · February 16, 2006, 10:31pm

declare an initial list-style-image and then a different one for li:hover

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
li {
	list-style-image:url(toparrow.gif)	
}
li:hover{
	list-style-image:url(downarrow.gif)
}
</style>
</head>
<body>
<ul>
	<li>
	<a href="">a list item</a>
	</li>
</ul>
</body>
</html>

Pretty general, but I hope that helps

Edit:

I’m not 100% sure of support for dynamic pseudo classes like li:hover, you may wanna do some reading on that if that’s what you’re after

doze · February 16, 2006, 11:07pm

Setting the bullet background image to #menu_bullet a:link, etc. resulted that the bullet image was not shown at all?? also trying to change z-index did not help.

Works good in firefox, but not in IE.

Then I thinked about the thing, that setting the bgimage to #menu_bullet a:link did not show it at all, I thought that maybe the #menu_bullet a:hover was not showing up for the same reason… and as the #menu_bullet is allready an link element, I just tried setting the hover to #menu_bullet:hover and it worked!!

If you now look this page with Firefox or Opera, you see it working just perfectly. But with IE, the link is only in the bullet element… and not in the whole thing… So that’s no good. Any way to fix this?

system · February 16, 2006, 11:56pm

bracka fracka suppadoodle sanna franna (down to just muttering under breath).
Can get it to work in either IE6 or FF1.5, but not both.
The way it is set up, the whole picture is essentially the link, so when you mouse over any part of the pic (except the text in IE dammit) you get the hover style. Lists are tough because often you want the bullet to change based around a behaviour related to the text next to it. Need them to be independant, but linked.
Anyway, long and short, I’m stumped man, sorry. Hopefully one of the gurus could help you out.

doze · February 17, 2006, 12:36am

Hehe, I didn’t notice that IE actually has the whole thing as a link, but it just doesn’t render the hand as the cursor. So I just put cursor: pointer; to the container and now it works and looks just fine in IE too.

So click here, to see the end result. Using just one background image in the bullet and changing the background-position would be even better, I might try that next, but glad to have something working allready.

Any comment’s about the way it’s done? I don’t know how other browsers render it (or older browsers), but firefox, opera and ie works great.

And here’s the code for others to see as the page behind the link get’s removed after a while…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menutest</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
#menu_bullet{
	float:			left;
	display:		inline;
	background-image:	url(img/menu_dot_normal.jpg);
	background-repeat:	no-repeat;
	height:			50px;
	padding-left:		42px;
	cursor:			pointer;
}

#menu_bullet:hover{
	background-image:	url(img/menu_dot_hover.jpg);
}

#menu_text{
	float:			left;
	display:		inline;
	background-image:	url(img/menu_item_bg.jpg);
	background-repeat:	repeat-x;
	height:			35px;
	width:			150px;
	padding-top:		15px;
	padding-left:		10px;
}
#menu_end{
	float:			left;
	display:		inline;
	background-image:	url(img/menu_item_end.jpg);
	background-repeat:	no-repeat;
	width:			22px;
	height:			50px;
}
</style>
</head>
<body>
<a id="menu_bullet" href="http://www.google.com">
	<span id="menu_text">text</span>
	<span id="menu_end"></span>
</a>
</body>
</html>

system · February 17, 2006, 1:23am

In FF1.5 the whole container is still a link, complete with the hand.
In IE6 the whole container is a link, but it’s just a pointer cursor, except over the text when I get just a text select cursor.
It’s a mystery why IE will let you do #menu_bullet:hover but not a li:hover
my brain is a little cooked, I don’t even wanna imagine yours.
I have the beginings of a really complex solution forming in my brain, but I’m going to give it some rest for now. From my experience complex solutions are never really needed, hopefully someone will offer some insight.

doze · February 17, 2006, 1:55am

Yes, I had it like this also. But as I said, I just put “cursor: pointer;” to the container, and atleast my IE6 is showing the hand now for the whole item just like FF.

Could you have the old version still in cache? It should work for you too…

#menu_bullet is an link element, so I think it’s logical that #menu_bullet:hover is working. li:hover is a competely different thing then…

PaulOB · February 17, 2006, 2:01am

It’s a mystery why IE will let you do #menu_bullet:hover but not a li:hover

IE only understands hover on anchors whereas other browsers such as firefox will allow hover to work on other elements as well.

As a rule of thumb you should never swap an image on hover because it is too slow and the image is only loaded the first time you roll over the element and you will get a delay.

The easiest way to swap images is to put the over state into the background of the parent and then overlay it with the normal state in the anchor. On hover you just make the anchor background transparent and the image already preloaded underneath shows through without delay.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#menu_bullet{
 float:left;
 display: inline;
 background: url(img/menu_dot_hover.jpg) no-repeat left top;
 background-repeat:  no-repeat;
 height:50px;
}
#menu_bullet a{
 background:url(img/menu_dot_normal.jpg) no-repeat left top;
 padding-left: 42px;
 float:left;
 cursor:pointer
}
#menu_bullet a:hover{ background:transparent}
#menu_bullet span#menu_text{
 display:block;
 background:url(img/menu_item_bg.jpg) repeat-x left top;
 height:35px;
 width:150px;
 padding-top:15px;
 padding-left:10px;
 float:left;
}
#menu_bullet span#menu_end{
 background: url(img/menu_item_end.jpg) no-repeat left top;
 width:22px;
 height:50px;
float:left;
}
</style>
</head>
<body>
<p id="menu_bullet"><a  href="<A href="http://www.google.com"><span">http://www.google.com"><span id="menu_text">text</span><span id="menu_end"></span></a></p>
</body>
</html>

doze · February 17, 2006, 2:12am

Ooh master, that’s some wicked sorcerery…! You’re the greatest! That saved me alot of time. I was going to do it by having the normal and hover state in one image and change the background position, but this works like a charm. I haven’t even noticed that transparent value of background.

Thanks alot!

EDIT: Almost forgot! Also many thanks to all others who helped! :tup:

Tyssen · February 17, 2006, 4:47am

Or you can create your image with both states in the one image and then use background position on hover to bring the new state into view.

BonRouge · February 17, 2006, 4:55am

Doze,
I’m not being funny (and I’m having a bad day, so I might sound a bit grumpy) but the link I gave you earlier says the same as what Paul said…

PaulOB · February 17, 2006, 12:32pm

Yes that’s fine also because the image is already preloaded

lol

doze · February 17, 2006, 5:22pm

I’m sorry, I noticed that too now… I did’nt get what you meant for me to try when you posted it, so I just overlooked it quickly… Thanks alot for the help!

Topic		Replies	Views
Navigation list with bullet and background color change using just css - possible? HTML & CSS	5	3571	October 8, 2014
Need help adding individual icons as list item bullets for navigation CMS & WordPress	10	1409	October 8, 2014
<li> Image background when hover? HTML & CSS	5	4006	October 8, 2014
Change image to bullet HTML & CSS	2	2747	April 1, 2018
Li:hover not working in IE HTML & CSS	12	9333	October 8, 2014

Css rollover bullet image in menu

Related topics