[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1349
  • Last Modified:

change background of li on hover

I want the background to change on hover for the link AND the bullet that is the the left of the link.

Now only the background for the text in the link changes.  I want the whole line including the bullet to change.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css" media="all">
 
#tangle ul {
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #993333;
  list-style-position: outside; 
  list-style-type: square;
}
 
#tangle li {
  margin: 0 0 0 20px;
  padding: 0 0 0 10px;
	display:list-item;
  font-size: 12px;
  color: #993333;
}
 
a:hover{
 background: #ddddee;
}
 
</style>
 
</head>
<body>
 
<div id="rect">
 <div id="tangle">
        <div>
         <h1>sfdgfd g dfgfdg</h1>
         <ul>
          <li><a href="#">sdfgsdf fd fdgsfdgfsd fdsgf</a></li>
          <li><a href="#">sfdgsdffs df fsd  fds g</a></li>
          <li><a href="#">sdfgsdf fd fdgsfdgfsd fdsgf</a></li>
          <li><a href="#">sfdgsdffs df fsd  fds g</a></li>
          <li><a href="#">sdfgsdf fd fdgsfdgfsd fdsgf</a></li>
          <li><a href="#">sfdgsdffs df fsd  fds g</a></li>
          <li><a href="#">sdfgsdf fd fdgsfdgfsd fdsgf</a></li>
          <li><a href="#">sfdgsdffs df fsd  fds g</a></li>
 
         </ul>
        </div>
        <div>
         <h1>sfdgfdsgsfdgfsdg</h1>
         <ul>
          <li><a href="#">sdfgsdf fd fdgsfdgfsd fdsgf</a></li>
          <li><a href="#">sfdgsdffs df fsd  fds g</a></li>
          <li><a href="#">sdfgsdf fd fdgsfdgfsd fdsgf</a></li>
          <li><a href="#">sfdgsdffs df fsd  fds g</a></li>
          <li><a href="#">sdfgsdf fd fdgsfdgfsd fdsgf</a></li>
          <li><a href="#">sfdgsdffs df fsd  fds g</a></li>
          <li><a href="#">sdfgsdf fd fdgsfdgfsd fdsgf</a></li>
          <li><a href="#">sfdgsdffs df fsd  fds g</a></li>
         </ul>
        </div>
 </div>
</div>
 
</body>
</html>

Open in new window

0
hankknight
Asked:
hankknight
  • 2
  • 2
2 Solutions
 
NahThenLadCommented:
Change the list-style-position on the ul selector to inside, then change

a:hover{
 background: #ddddee;
}

to

li:hover{
 background: #ddddee;
}

HTH

Tony

0
 
level9wizardCommented:
a:hover{
 background: #ddddee;
 color: #ddddee;
}

Should do it. However, this is a global style. You really want something like:

#tangle li a:hocer
{
 background: #ddddee;
 color: #ddddee;
}
0
 
level9wizardCommented:
Typo there, Meant this:

#tangle li a:hover
{
 background: #ddddee;
 color: #ddddee;
}
0
 
hankknightAuthor Commented:
Neither of your ideas change the background for the bullet, only for the text.
0
 
NahThenLadCommented:
This works in Firefox, though not IE6 and haven't checked elsewhere.

Because the bullet is part of the li element, it is this that you need to change, the a element is responsible for just the hyperlink anchor text.


<style type="text/css" media="all">
 
#tangle ul {
  width: 200px;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #993333;
  list-style-position: inside; 
  list-style-type: square;
}
 
#tangle li {
  margin: 0 0 0 20px;
  padding: 0 0 0 10px;
  font-size: 12px;
  color: #993333;
}
 
#tangle li:hover{
 background: #ddddee;
}
 
</style>

Open in new window

0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now