We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

CSS - show list style on hover

wattanabi2
wattanabi2 asked
on
Medium Priority
1,307 Views
Last Modified: 2012-08-13
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

Comment
Watch Question

Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Commented:
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
David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009

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

Commented:
this is why kravimir is a genius and i am a nothing :)

Author

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

Commented:
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 :)
David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009

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;
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.