Hover effect in JS

Question

Hover effect in JS

Navigation

#1 by (4 votes)
#2 by (3 votes)
#3 by (1 votes)

4

I have a problem that is as follows: I want the user to move the mouse on a certain image to another location and gain a class so that I can style it, can they help me?

I'm trying this way:

var $JQuery2 = jQuery.noConflict()
$JQuery2(function() {
    $JQuery2(".bt_pagamento-facilitado").hover(function(){
                $JQuery2(".bt_criacoes-exclusivas").addClass("redesAl");
    });
});

javascript jquery hover eventos-do-mouse

asked by anonymous 11.01.2018 / 18:44

3 answers

Returning direct and array function string Doubt - SaveChanges does not work, only returns 0

score 4 · Answer 1

The event .hover should have 2 functions: one for when the mouse is over the element and another for when to exit .

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>Passeomousesobreaimagem:<br/><imgsrc="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>

Official documentation of .hover .

score 3 · Answer 2

A different option for the problem is to do this direct effect with CSS using some selectors , which can be:

.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

Example

#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>

score 1 · Answer 3

See your code working ...

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><divclass="bt_pagamento-facilitado"></div>

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

Maybe you have not defined classes right in HTML or CSS ...