Hover effect on JS

Asked

Viewed 5,001 times

4

I have a problem that is the following: I want that when the user hovers the mouse on a given image another location wins a class so that I can style it, they could 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

  • You could edit and put some information about the error that is occurring?

  • Just nothing happens, I believe that this right the logic, but it does not work.

  • @Fernando, class is not added?

  • Are you sure you can’t do it with CSS? Post html/css that helps

3 answers

4

The event .hover must have 2 functions: one for when the mouse is over the element and the other 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>
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>

Official documentation of .hover.

  • It worked, thank you very much!

  • @Fernando I’m happy! If you can, mark the answer with . Obg!

3

A different option for the problem is to make this effect direct with CSS using some selectors, that may 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>

  • +1 for using only css. however I believe q only works while the right Hover occurs? because when removing the mouse there is no effect

  • That would be basically what I need, I tried to adapt but it didn’t work : #imgPagFaci:Hover + #bt_exclusive creations { right: 500px; }

  • Good point @N.Days, if the style is permanent after Hover will not work

  • Two things @Fernando, we need to know the relevant part of your HTML and Hover event should permanently change the other element, or when it exits the mouse removes the change?

  • When the Hover effect passes the information goes back to the way it was before

  • What do you mean a permanent style? This attribute of the right has already been filled with a value, I want it to change with this

  • So this way is the most indicated, by staying only in css. Maybe you’re not applying by class names.. several other reasons. Permanent style if after changing the Hover, the changed element will no longer change or return to the previous state

  • Testing this way it simply does not obey the first instruction to earn this value only after Hover, it simply takes the value that was to be assigned only after Hover: div#bt_exclusive creations:Hover+#bt_facilitated payment { right: 500px; }

Show 3 more comments

1

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

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

Maybe you didn’t set the classes right in HTML or CSS...

  • But when I take out the mouse the effect should return to normal

Browser other questions tagged javascript jquery hover

You are not signed in. Login or sign up in order to post.