How to apply hover effect (JQuery) to a specific group of classes?

Question

How to apply hover effect (JQuery) to a specific group of classes?

Navigation

#1 by (3 votes)

2

I'm creating a web page that would look something like a store. The idea of this code is that, when hovering in the product.device, two other divs appear (one on the right and one on the bottom), and this effect needs to be done in JQuery / Javascript. The problem is that since the page will contain multiple products, you will need several of these divs (which is why these divs are given classes, not IDs). The problem is that although I have achieved the effect with JQuery / Javascript, when hovering in the class, all divs suffer the effect.

My question is: how to apply this effect to only one group of these three divs? In order to avoid confusion, how to apply this effect only in the divs inside div # div1, # div2, 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><!DOCTYPEhtml><html><head><title>Efeitohover</title><metacharset="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>

html jquery hover

asked by anonymous 13.11.2017 / 01:48

1 answer

I can not get the value of a child element Get server operating system in PHP [duplicate]

score 3 · Answer 1

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

$(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><!DOCTYPEhtml><html><head><title>Efeitohover</title><metacharset="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>