PDA

View Full Version : Make unordered list bullet appear on hover



hbadorties
05-19-2006, 09:33 PM
Hello CSS gurus,

I want to make an unordered list without any bullets for a menu.

I want a custom bullet (eg: double chevron) to appear when the mouse hovers over the link.

I am stuck.

Any tips/tricks/pouinters would be most welcome.

Twey
05-19-2006, 10:28 PM
Well, this is easy to do for everything else, but not so for IE. IE doesn't support :hover for non-<a> elements, and it doesn't support most of the selectors that would allow us to work around this. Therefore, the only way to do it is to simulate it with Javascript.
<style type="text/css">
ul {
list-style-type: none;
}

li:hover, li.hovered {
list-style-image = url(path/to/image.jpg);
}
</style>
<script type="text/javascript">
if(document.all) window.onload = function() {
var c = document.getElementsByTagName("li");
for(var i=0;i<c.length;i++) {
c[i].onmouseover = function() {
this.className = "hovered";
};
c[i].onmouseout = function() {
this.className = "";
};
};
};
</script>