4

Estou com um problema que é o seguinte: quero que quando o usuário passe o mouse em determinada imagem um outro local ganhe uma classe para que eu possa a estilizar, poderiam me ajudar?

Estou tentando dessa forma:

var $JQuery2 = jQuery.noConflict()
$JQuery2(function() {
    $JQuery2(".bt_pagamento-facilitado").hover(function(){
                $JQuery2(".bt_criacoes-exclusivas").addClass("redesAl");
    });
});
4
  • Você poderia editar e colocar alguma informação sobre o erro que está ocorrendo?
    – bio
    Commented 11/01/2018 às 17:48
  • Simplesmente nada acontece, acredito que esta certo a logica, porém não funciona.
    – Fernando
    Commented 11/01/2018 às 17:50
  • @Fernando, a classe não é adicionada?
    – N. Dias
    Commented 11/01/2018 às 17:56
  • Tem certeza que não da para fazer com CSS? Poste o html/css que ajuda
    – hugocsl
    Commented 11/01/2018 às 21:44

3 Respostas 3

4

O evento .hover deve ter 2 funções: uma para quando o mouse estiver sobre o elemento e outra para quando sair.

var $JQuery2 = jQuery.noConflict()
$JQuery2(function() {
   $JQuery2(".bt_pagamento-facilitado").hover(
      // função que adiciona a classe
      function(){
         $JQuery2(".bt_criacoes-exclusivas").addClass("redesAl");
      },
      // função que remove a classe
      function(){
         $JQuery2(".bt_criacoes-exclusivas").removeClass("redesAl");
      });
});
.redesAl {
  background: red;
  color: #fff;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Passe o mouse sobre a imagem:
<br />
<img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" height="50" class="bt_pagamento-facilitado" />
<br />
<div class="bt_criacoes-exclusivas">Texto texto</div>

Documentação oficial do .hover.

2
  • Funcionou, muito obrigado!
    – Fernando
    Commented 11/01/2018 às 18:46
  • @Fernando Fico feliz! Se puder, marque a resposta com ✓. Obg!
    – Sam
    Commented 11/01/2018 às 18:48
3

Uma opção diferente para o problema é fazer esse efeito direto com CSS usando alguns seletores, que podem ser:

.classe ~ .outraClasse {} #se outraClasse é irmao de classe
.classe + .outraClasse {} #se outraClasse é o proximo elemento
.classe > .outraClasse {} #se outraClasse está direto dentro de classe
.classe ~ .outraClasse {} #se outraClasse está em algum lugar dentro de classe

Exemplo

#imagem {
  background-color: red;
}

#imagem:hover + #alterar {
  background-color: blue;
}
<div id="container">
  <img alt="Imagem vem aqui" id="imagem" />

  <div id="alterar">
    <h4>Conteudo da div</h4>
  </div>

</div>

8
  • +1 por usar somente css. contudo acredito q só funcione enquanto ocorre o hover certo? pois ao remover o mouse não há o efeito
    – N. Dias
    Commented 11/01/2018 às 18:09
  • Seria basicamente isso mesmo que eu preciso, tentei adaptar mas não funcionou : #imgPagFaci:hover + #bt_criacoes-exclusivas { right: 500px; }
    – Fernando
    Commented 11/01/2018 às 18:14
  • Bom ponto @N.Dias, caso o estilo seja permanente após o hover não vai funcionar
    – BrTkCa
    Commented 11/01/2018 às 18:15
  • Duas coisas @Fernando, precisamos saber a parte relevante do seu HTML e evento hover deverá mudar permanentemente o outro elemento, ou quando sair o mouse retira a alteração?
    – BrTkCa
    Commented 11/01/2018 às 18:16
  • Quando o efeito hover passar as informações voltam como eram antes
    – Fernando
    Commented 11/01/2018 às 18:22
1

Veja seu código funcionando...

var $JQuery2 = jQuery.noConflict()
$JQuery2(function() {
    $JQuery2(".bt_pagamento-facilitado").hover(function(){
                $JQuery2(".bt_criacoes-exclusivas").addClass("redesAl");
    });
});
.bt_pagamento-facilitado {
  width: 100px;
  height: 100px;
  background: green;
}
.bt_criacoes-exclusivas {
  width: 100px;
  height: 100px;
  background: yellow;
}
.redesAl {
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bt_pagamento-facilitado"></div>

<div class="bt_criacoes-exclusivas"></div>

Talvez você não definiu direito as classes no HTML ou no CSS...

1
  • Mas quando eu tirar o mouse o efeito deve voltar ao normal
    – Fernando
    Commented 11/01/2018 às 18:16

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 .