2

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>
2
  • postei o pedaço do código que estou com dificuldade
    – goio
    Commented 3/12/2017 às 0:26
  • na li pai no caso li > a > box, que quando a pessoa passar o mouse nela, mude o hover da imagem e as cores dos h1, span e a
    – goio
    Commented 3/12/2017 às 0:33

1 Resposta 1

2

Use o coringa * para alterar a cor de todo o texto dos elementos filhos da div .box:

$('.box').on('mouseover mouseleave', function(e){
  $(this).find('img').attr('src', e.type == 'mouseover' ? 'https://images-na.ssl-images-amazon.com/images/I/41n3kSb1zvL.jpg' : 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Basketball.jpeg/220px-Basketball.jpeg');
});
ul li{
   float:left;
}
ul li .box{
   width: 200px;
   height:200px;
}
ul li .box ul li img{
   width: 100%;
   height:100%;
}

.box:hover * {
   color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li>
      <a href="javascript:void(0);">
         <div class="box">
            <ul>
               <li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Basketball.jpeg/220px-Basketball.jpeg" 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>

Como a imagem não é um background, para alterá-la, você terá que usar JavaScript ou jQuery.

4
  • achei um exemplo aqui no site mesmo, que fazia o efeito hover em imagem com after, até fiz o exemplo aqui e funcionou, porém sem oque eu preciso, que é quando passar o mouse pela li pai mudar o back da imagem e as cores ao mesmo tempo, você poderia dar um exemplo de como fazer com jquery ?
    – goio
    Commented 3/12/2017 às 0:47
  • @Mayron Atualizei a resposta.. Mas se quiser eu posso fazer o :after.
    – Sam
    Commented 3/12/2017 às 0:54
  • perfeito, é isso mesmo que eu preciso, você é 10 valeu!!!
    – goio
    Commented 3/12/2017 às 0:56
  • @Mayron Valeu!!
    – Sam
    Commented 3/12/2017 às 0:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .