Hi list,
Trying to do something new today, playing with css, and change a
background position of a image on hover.
I've added the following code:
#menu div a{
height:32px;
width:180px;
display:block;
}
#menu #home a{
background:#f4a707 url('../images/menu/home_01.gif')0 0 no-repeat;
}
#menu #projetos a{
background:#f4a707 url('../images/menu/projetos_02.gif')0 0 no-repeat;
}
#menu #eventos a{
background:#f4a707 url('../images/menu/eventos_03.gif')0 0 no-repeat;
}
#menu #noticias a{
background:#f4a707 url('../images/menu/noticias_04.gif')0 0 no-repeat;
}
#menu div a:hover{
background-position:0 -32px;
}
but this don't work, the background-position don't change, but if I
change the menu div a rule to:
#menu div a:hover{
border:5px solid red;
background-position:0 -32px;
}
the border appear around the element, but again it don't change the
background position, and if I do this:
#menu #home a:hover{
background-position:0 -32px;
}
it works as it should, Is there any reason for this ? I wanted to save
some kb using a generic :hover ( the menu contains 10 items ), the
xhtml for it is simple:
<div id="menu">
<div id="header"><img src="images/menu/header.gif" width="180"
height="28" alt="" /></div>
<div id="home"><a href="index.html"></a></div>
<div id="projetos"><a href="/projetos"></a></div>
<div id="eventos"><a href="/cadastro"></a></div>
<div id="noticias"><a href="/noticias"></a></div>
</div>
I really want to know the cause of the the generic rule don't working
on changing the background-position, but accepting the border rule (
and possible others ).
TIA
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
