By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,846 Members | 1,872 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,846 IT Pros & Developers. It's quick & easy.

IE: a:hover bullet visibility

P: n/a
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]"><span class="bullet"><img
src="http://www.shambhala.de/media/grafik/arrow_small.gif" width="9"
height="9"/>&nbsp;</span>Tibet</a><br/>

[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
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Peter Schlenker wrote:
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]"><span class="bullet"><img
src="http://www.shambhala.de/media/grafik/arrow_small.gif" width="9"
height="9"/>&nbsp;</span>Tibet</a><br/>


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?

--
Brian
follow the directions in my address to email me

Jul 20 '05 #2

P: n/a
*Brian* <us*****@julietremblay.com.invalid-remove-this-part>:
<a href="http://www.shambhala.de/reisen/kailash.php"
title="[title]"><span class="bullet"><img
src="http://www.shambhala.de/media/grafik/arrow_small.gif"
width="9" height="9"/>&nbsp;</span>Tibet</a><br/>

<li><a href="/reisen/kailash" title="[title]"><img class="bullet"
src="/media/grafik/arrow_small.gif" width="9" height="9"
alt="&gt;">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 <br>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.

--
"When a thing has been said and well, have no scruple. Take it and copy it."
Anatole France
Jul 20 '05 #3

P: n/a
Christoph Paeper wrote:
*Brian* <us*****@julietremblay.com.invalid-remove-this-part>:
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.


Ugh. I was having a miserable night. 3 brain-dead responses.
Apologies again.
A list is a better approach than using <br>s, though.


Well, hooray for me. :-/

--
Brian
follow the directions in my address to email me

Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.