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.
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>
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;
}
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;
}
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Neither of your ideas change the background for the bullet, only for the text.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
a:hover{
background: #ddddee;
}
to
li:hover{
background: #ddddee;
}
HTH
Tony