Negócio é o seguinte, tenho um div
que segura minhas li
, e dentro dessas li
tem uma imagem e três li
com textos, meu objetivo é fazer com que, quando o mouse for passado em cima dessa li
, a imagem mude dando um efeito hover
e os texto também mudem a cor, mesmo não passando o mouse sobre eles, bom e assim para a imagem também quando passado o mouse pelos textos, dando o efeito hover
nas imagens
<ul>
<li>
<a href="javascript:void(0);">
<div class="box">
<ul>
<li><img src="images/fundo.png" border="0"/></li>
<li><h1>FUNDOS</h1></li>
<li><span>FUNDOS PARA XAT</span></li>
<li><a href="#">VER MAIS</a></li>
</ul>
</div>
</a>
</li>
</ul>
<style>
ul li{
float:left;
}
ul li .box{
width: 200px;
height:200px;
}
ul li .box ul li img{
width: 100%;
height:100%;
}
.box ul li:hover img {
background: url(../images/fundo-hover.png) no-repeat;
}
.box ul li:hover h1,
.box ul li:hover span,
.box ul li:hover a{
color: red;
}
</style>
li > a > box
, que quando a pessoa passar o mouse nela, mude o hover da imagem e as cores dos h1, span e a