How to apply the Hover (Jquery) effect to a specific group of classes?

Asked

Viewed 47 times

2

I’m creating a web page that would be something like a store. The idea of this code is that, by giving it to the div. lojaprodutos, appear two other Divs (one on the right and one below), and this effect needs to be done in Jquery/Javascript. The problem is that as the page will contain multiple products, you will need several of these Ids (which is why these Ivs receive classes, not Ids). The problem is that although I have achieved the effect with Jquery/Javascript, when giving Hover in the class, all Divs suffer the effect.

My question is: how to apply this effect to only one group of these three Ivds? To avoid confusion, how to apply this effect only on Ivs within div #divisao1, #divisao2, etc.?

$(document).ready(function() {
  var boxHeight = $(".box").height();
  $(".lojaprodutos,.lojaavaliacao,.lojaespecificacao").mouseenter(function() {
    $(".lojaavaliacao").css({
      'width': '15vw'
    });
    $(".lojaespecificacao").css({
      'height': '15vw'
    });
  }).mouseleave(function() {
    $(".lojaavaliacao").css({
      'width': '0'
    });
    $(".lojaespecificacao").css({
      'height': '0'
    });
  });
});
#divisao1 {
  width: 50vw;
  height: 35vw;
  background: blue;
  position: absolute;
}

#divisao2 {
  width: 50vw;
  height: 35vw;
  margin-left: 50vw;
  background: red;
  position: absolute;
  transition: 0.5s;
}

.lojaprodutos {
  width: 20vw;
  height: 20vw;
  margin-left: 7.5vw;
  margin-top: 0;
  background: pink;
  transition: 0.5s;
}

.lojaavaliacao {
  width: 0;
  height: 16vw;
  background: yellow;
  margin-left: 27.5vw;
  margin-top: -18vw;
  transition: 0.5s;
}

.lojaespecificacao {
  width: 20vw;
  height: 0;
  margin-left: 7.5vw;
  margin-top: 2vw;
  background: orange;
  transition: 0.5s;
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Efeito hover</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="divisao1">
    <div class="lojaprodutos">Como ativar o efeito só aqui?</div>
    <div class="lojaavaliacao"></div>
    <div class="lojaespecificacao"></div>
  </div>

  <div id="divisao2">
    <div class="lojaprodutos">Ou só aqui?</div>
    <div class="lojaavaliacao"></div>
    <div class="lojaespecificacao"></div>
  </div>

</body>

</html>

jquery html hover

  • The effect is supposed to affect everyone or just the one in which it was made Hover ?

1 answer

2


Use the selector this to reach only the element that suffers the event, and assigning the events to the element div father makes it easier to access the children through the function find.

$(document).ready(function() {
  var boxHeight = $(".box").height();
  $("div.loja").mouseenter(function() {
    $(this).find(".lojaavaliacao").css({
      'width': '15vw'
    });
    $(this).find(".lojaespecificacao").css({
      'height': '15vw'
    });
  }).mouseleave(function() {
    $(this).find(".lojaavaliacao").css({
      'width': '0'
    });
    $(this).find(".lojaespecificacao").css({
      'height': '0'
    });
  });
});
#divisao1 {
  width: 50vw;
  height: 35vw;
  background: blue;
  position: absolute;
}

#divisao2 {
  width: 50vw;
  height: 35vw;
  margin-left: 50vw;
  background: red;
  position: absolute;
  transition: 0.5s;
}

.lojaprodutos {
  width: 20vw;
  height: 20vw;
  margin-left: 7.5vw;
  margin-top: 0;
  background: pink;
  transition: 0.5s;
}

.lojaavaliacao {
  width: 0;
  height: 16vw;
  background: yellow;
  margin-left: 27.5vw;
  margin-top: -18vw;
  transition: 0.5s;
}

.lojaespecificacao {
  width: 20vw;
  height: 0;
  margin-left: 7.5vw;
  margin-top: 2vw;
  background: orange;
  transition: 0.5s;
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Efeito hover</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="divisao1" class="loja">
    <div class="lojaprodutos">Como ativar o efeito só aqui?</div>
    <div class="lojaavaliacao"></div>
    <div class="lojaespecificacao"></div>
  </div>

  <div id="divisao2" class="loja">
    <div class="lojaprodutos">Ou só aqui?</div>
    <div class="lojaavaliacao"></div>
    <div class="lojaespecificacao"></div>
  </div>

</body>

</html>

  • A brief explanation of the changes would be interesting for the community!

  • I added the explanation

  • now yes, beauty +1

Browser other questions tagged jquery html hover

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