IE: a:hover bullet visibility

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Peter Schlenker - 28 Oct 2003 17:34 GMT

In a navigation panel I try to place a bullet before each entry when
the link is hovered at (see http://www.shambhala.de). Mozilla does it
like expected, but IE doesn't - any ideas?

[HTML-Snippet]

<a href="http://www.shambhala.de/reisen/kailash.php"
title="[title]"><img
src="http://www.shambhala.de/media/grafik/arrow_small.gif" width="9"
height="9"/> Tibet</a> 

[CSS]

a:link .bullet, a:visited .bullet {
visibility: hidden;
}
a:hover .bullet, a:active .bullet {
visibility: visible;
}

for the complete stylesheet see: http://www.shambhala.de/style.css

Reply to this Message

Brian - 29 Oct 2003 04:28 GMT

> In a navigation panel I try to place a bullet before each entry when
> the link is hovered at (see http://www.shambhala.de).

Don't forget the KISS principle.

> <a href="http://www.shambhala.de/reisen/kailash.php"
> title="[title]"><img
> src="http://www.shambhala.de/media/grafik/arrow_small.gif" width="9"
> height="9"/> Tibet</a>

Are they list items? If so, then mark them up as a list.

Then, the css is fairly easy.

li a:link {list-style-type: none}
li a:hover {list-style-type: disc}

You can use an image for the marker, too, but why complicate things?

Signature

Brian
follow the directions in my address to email me

Reply to this Message

Christoph Paeper - 29 Oct 2003 15:19 GMT

*Brian* <usenet1@julietremblay.com.invalid-remove-this-part>:

>> <a href="http://www.shambhala.de/reisen/kailash.php"
>> title="[title]"><img
>> src="http://www.shambhala.de/media/grafik/arrow_small.gif"
>> width="9" height="9"/> Tibet</a>

<li><a href="/reisen/kailash" title="[title]"><img class="bullet"
src="/media/grafik/arrow_small.gif" width="9" height="9"
alt=">">Tibet</a></li>

li {list-style: none; text-align: right}
a img.bullet {visibility: hidden; padding-right: 0.3em}
a:hover img.bullet {visibility: visible}

That should work even in IE. If not, I don't know why.

> li a:link {list-style-type: none}
> li a:hover {list-style-type: disc}

That's assigning a 'list-style-type' to a box (the one the 'a' element
generates), that isn't a 'list-item' by default and shouldn't be here
neither. The value also isn't inherited to the 'li', which usually does have
"display: list-item". That means your code should and will not work as you
intended. A list is a better approach than using s, though.

li {list-style: none}
li:hover {list-style: url('/media/grafik/arrow_small.gif') disc}

will do as intended in some browsers, but not in IE.

a:before:hover {content: "> "; content:
url('/media/grafik/arrow_small.gif')}

will work in even fewer browsers.

P.S.: Instead of '>' you can try using a more appropriate Unicode character,
e.g. U+25B6.

Signature

"When a thing has been said and well, have no scruple. Take it and copy it."
Anatole France

Reply to this Message

Brian - 29 Oct 2003 19:05 GMT

> *Brian* <usenet1@julietremblay.com.invalid-remove-this-part>:
>
[quoted text clipped - 6 lines]
> "display: list-item". That means your code should and will not work as you
> intended.

Ugh. I was having a miserable night. 3 brain-dead responses.
Apologies again.

> A list is a better approach than using s, though.

Well, hooray for me. :-/

Signature

Brian
follow the directions in my address to email me

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / October 2003

IE: a:hover bullet visibility