CSS - show list style on hover

Hello,

I've been banging my head against the wall on this one. All I'm trying to do is display the list style (i.e. disc) when someone hovers over a link in an unordered list. The list style should be hidden by default and only be displayed when someone hovers over a link. Attached is the code.

thanks
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
li a {
 
	list-style-type:none;
	list-style:none;
	text-decoration:underline;
	display:block;
 
}
 
li a:hover {
 
	list-style-type:disc;
	text-decoration:none;
 
}
</style>
</head>
 
<body>
<ul>
  <li><a href="#">A</a>
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </li>
  <li><a href="#">B</a></li>
  <li><a href="#">C</a> </li>
</ul>
</body>
</html>

Open in new window

wattanabi2Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

szewkamCommented:
Try something like this in snippet. Works in FF3 and Opera9.
ul {
 
        list-style-type:none;
        list-style:none; 
        display:block;
 
}
a { display: block;}
li:hover, a:hover {
        list-style-type:disc;
        text-decoration:none;
 
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mstrelanCommented:
list-style-type only applies to <li> elements not to <a>s
in internet explorer less than 8 you can only apply :hover to <a> elements, not to <li>
so you have three options

1. ignore ie6 and 7
2. produce invalid markup by wrapping <a>'s around the <li>'s and apply a:hover li { }
3. use a javascript solution..
li.onmouseover = function() { this.className = 'bulleted'; }
li.onmouseout = function() { this.className = ''; }
// and use a css class called .bulleted instead of :hover
0
David S.Commented:
IE7 supports :hover on most elements. It's versions before it that have very limited support for it. (http://reference.sitepoint.com/css/pseudoclass-hover)

There's a better option for making it work in IE6: http://www.xs4all.nl/~peterned/csshover.html
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

mstrelanCommented:
this is why kravimir is a genius and i am a nothing :)
0
wattanabi2Author Commented:
The code that szewkam provided seems to do the trick. I've gone from:

list-style-type:disc;

to

list-style-image:url(http://cache-foo.gawker.com/gawker/assets/base.v8/img/icons/flame.png);

Using an image instead of a list-style-type. Works fine in FF but in IE7, when hovering over one of the ul li items (1,2,3), all three items display the image instead of just the one that I'm hovering over.

Thoughts?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul {
 
        list-style-type:none;
        list-style:none; 
        display:block;
 
}
 
a { 
 
		display: block;
}
li:hover, a:hover {
 
        /* list-style-type:disc; */
		list-style-image:url(http://cache-foo.gawker.com/gawker/assets/base.v8/img/icons/flame.png);
        text-decoration:none;
 
}
</style>
</head>
 
<body>
<ul>
  <li><a href="#">A</a>
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </li>
  <li><a href="#">B</a></li>
  <li><a href="#">C</a> </li>
</ul>
</body>
</html>

Open in new window

0
szewkamCommented:
i'm afraid that you have to wait for somebody who has windows with ie ;). I can't help with it, I successfully get rid of ie :)
0
David S.Commented:
Instead of

list-style-image:url(http://cache-foo.gawker.com/gawker/assets/base.v8/img/icons/flame.png);

I suggest you use

background: url(http://cache-foo.gawker.com/gawker/assets/base.v8/img/icons/flame.png) no-repeat left center;
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.