We help IT Professionals succeed at work.

Change background on list on hover....

fox_statton
fox_statton asked
on
Hi all,
I have the code attached with this question, which basically displays a list in a fancy way. Is there any way I can change the background colour when a person hovers over the li or link?


<style type="text/css">
<!--
#menu {
	font-family: Arial, Helvetica, sans-serif;
	color: #666666;
}
#menu li {
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	color: #BDB688;
	background-color: #E6E3D2;
	border: 1px solid #BDB688;
	font-size: 11px;
	text-decoration: none;
	margin: 4px;
	padding-top: 6px;
	padding-right: 8px;
	padding-bottom: 6px;
	padding-left: 24px;
	background-repeat: no-repeat;
	background-position: 4px 6px;
	width: 150px;
}
#menu li a {
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #333333;
	font-size: 11px;
}
 
	
-->
</style>
<ul id="menu">
  <li style="background-image:url(images/home.gif)"><a href="application.php?appid=3&amp;pageid=1"><span>Home</span></a></li>
   <li style="background-image:url(../../elements/images/add2.gif)"><a href="application.php?appid=3&amp;pageid=4"><span>Add Profile</span></a></li>
  <li style="background-image:url(../../elements/images/database_record.gif)"><a href="application.php?appid=3&amp;pageid=22"><span>List Profiles</span></a></li>
 
    <li style="background-image:url(../../elements/images/add2.gif)"><a href="application.php?appid=3&amp;pageid=29"><span>Add Company</span></a></li>
    <li style="background-image:url(../../elements/images/calendar.png)"><a href="application.php?appid=3&amp;pageid=19"><span>List Companies</span></a></li>
        <li style="background-image:url(../../elements/images/user.gif)"><a href="ListGroups.php"><span>Groups</span></a></li>
                <li style="background-image:url(../../elements/images/database_record.gif)"><a href="application.php?pageid=44&amp;appid=3"><span>Reports</span></a></li>
  <li style="background-image:url(images/search.gif)"><a href="application.php?appid=3&amp;pageid=24"><span>Search</span></a></li>
</ul>

Open in new window

Comment
Watch Question

CERTIFIED EXPERT

Commented:
Something like this...


#menu li a:hover {background-color:#cc0000; color:white;}

Open in new window

Author

Commented:
Hi,
That doesnt turn the whole LI background different....
CERTIFIED EXPERT
Commented:
To do that you need to give the hyperlink property a display:block entry.

This forces the hyperlink to stretch to the full width of the available space.


#menu li a {
        display:block;
        text-decoration: none;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-weight: bold;
        color: #333333;
        font-size: 11px;
}

Open in new window

Author

Commented:
Just a final comment, it doesnt quite work as exected. I think the padding stop the whole LI from changing colour, any way around this?
CERTIFIED EXPERT

Commented:
Take the padding off the list item and put it on the hyperlink itself.

LI should have 0 padding
A should have what is currently on the LI

Explore More ContentExplore courses, solutions, and other research materials related to this topic.