css hover fail

EdwardKing

08-09-2010, 04:09 PM

I use css hover,like follows code,but when I use mouse over the items,but I don't find the item backgound change! Why hover fail? How to correct following code? Thanks!

<style>
.menubar {
border-bottom: 1px solid #AACCF6;
color: #222222;
cursor: pointer;
display: block;
height: 20px;
width: 50px;
line-height: 17px;
outline-color: -moz-use-text-color;
outline-style: none;
outline-width: 0;
padding: 3px;
text-align: center;
text-decoration: none;
white-space: nowrap;
}

.menubar:hover {
background: #EBF3FD url("item-over.jpg") repeat-x scroll left bottom;
text-decoration: none;
}
</style>

<body>
<ul id="knowledgemenu" class="x-hidden mymenu">
<li><a id="knowledge" class="menubar">Navigation</a></li>
<li><a id="bbs" class="menubar">Item1</a></li>
<li><a id="question" class="menubar">Item2</a></li>
<li><a id="sloved" class="menubar">Item3</a></li>
</ul>
</body>

SB65

08-09-2010, 04:17 PM

That code's fine in FF and IE7.

If it's IE7 that's the problem I guess you may not have a valid doctype (http://www.alistapart.com/articles/doctype).

It won't work in IE6 because :hover is only supported on anchor <a> elements. If you're trying to get bit working in IE6 I'd suggest applying the styling direct to the a rather than the li, for a simple fix.

EDIT:Ignore the last paragraph - misread your code (see Aero's post below)

Arbitrator

08-10-2010, 01:47 AM

FYI, outline-color: -moz-use-text-color is deprecated. Mozilla supports CSS3 Color's currentColor keyword now.

_Aerospace_Eng_

08-10-2010, 02:50 AM

That code's fine in FF and IE7.

It won't work in IE6 because :hover is only supported on anchor <a> elements. If you're trying to get bit working in IE6 I'd suggest applying the styling direct to the a rather than the li, for a simple fix.

If it's IE7 that's the problem I guess you may not have a valid doctype (http://www.alistapart.com/articles/doctype).

But the OP is using :hover on the anchors, not the li elements. So its likely there is something else overriding the background.

@OP please post a link to your page.

benedict

08-10-2010, 10:17 AM

learnning