5

Gostaria de saber como posso fazer com que o evento :hover em um elemento faça efeito em outro... Tenho o seguinte código:

<ul>
  <a href="#">
     <li>
        <div id="search-image"><img src="images/image.jpg"/></div>
        <h1>Título</h1>
        <div id="search-bottom">
           <p class="price"><b>R$</b> XXX</p>
           <p class="deal">Texto</p>
           <p class="date">xx/xx/xx</p>
        </div>
     </li>
  </a>
</ul>

Gostaria de colocar uma borda e mudar a cor do título h1 ao ter o efeito hover no elemento <li>.

3 Respostas 3

12

Observando que o h1 está dentro do li, você pode fazer com CSS puro. Por exemplo:

li:hover h1 {
    /*aqui o seu estilo para H1*/
}

Veja funcionando:

li:hover h1 {
  border: 2px solid #FFFF00;
  color: #ff0000;
}

li:hover img {
  transform:scale(2);
}
<ul>
  <a href="#">
    <li>
      <div id="search-image">
        <img src="images/image.jpg" />
      </div>
      <h1>Título</h1>
      <div id="search-bottom">
        <p class="price"><b>R$</b> XXX</p>
        <p class="deal">Texto</p>
        <p class="date">xx/xx/xx</p>
      </div>
    </li>
  </a>
</ul>

quando colocar o cursor sobre o li, o h1 e o img terão seu estilo alterado.

4
  • É possível usar css puro também para afetar elementos que não sejam filhos do elemento que recebe o hover, desde que seja possível referenciá-lo. Um exemplo seria utilizando o + para referenciar uma tag que seja "irmã" da tag que recebe o hover.
    – ndvo
    2/10/2015 às 0:00
  • Obrigado, eu vou estilizar esse elemento Li e colocar uma border ao redor dele, só que quando ocorre o efeito hover ele meio que distorce, como nesse exemplo que você fez, como faço pra deixar imóvel? E Obrigado de novo :) 2/10/2015 às 20:57
  • E como fazer esse efeito em mais de um elemento? por exemplo, gostaria de aumentar o tamanho da imagem dentro da div "search-image" com o transform: scale() no efeito hover no elemento li também. 2/10/2015 às 20:59
  • A ideia é a mesma: li:hover img { /*estilo da imagem*/ }, Editei a resposta, olha lá 2/10/2015 às 21:15
4

Basta você usar o hover na definição do elemento que você quer alcançar no CSS. Pense no hover como um pseudo atributo do elemento. Ele de facto serve para identificar qualquer elemento da mesma forma que uma classe serviria. Ao contrário do hábito mais corriqueiro, o hover não precisa ser necessariamente usado no final da definição.

Neste caso, para colocar uma borda fina e prateada e tornar o título h1 azul por exemplo, o código seria o seguinte:

li:hover h1{
    border: solid thin silver;
    color: blue;
}

O mesmo vale para os outros pseudo elementos.

0

Uma classe chamando outra após passa o mouse encima no css

.imagemfundo{
    height: 221px;
    background-color:blue;
    background-repeat: no-repeat;
    align-items: center;
    width: 221px;
    
}    
.textocentro{
    
    display:none;
}

.imagemfundo:hover .tituloimagen{
    
 display:block;
 font-size: 18px;
 align-items: center;
 height: 180px;
 width:180px;
 background: red;
 margin: 20px;
 border-radius: 221px;
 display: flex;
position: absolute;

}

.imagemfundo:hover .textocentro{
   align-items: center;
   display: flex;
   left: 40%;
    position: absolute;
}
    
<div class="imagemfundo">
    
    
  <div class="tituloimagen">
  
    <div class="textocentro">
       texto 
        
    </div>
    
</div>    
    
    
</div>

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 .