Eu estou criando uma página web que seria algo como uma loja. A ideia desse código é que, ao dar hover na div .lojaprodutos, apareçam duas outras divs (uma à direita e outra embaixo), e esse efeito precisa ser feito em JQuery/Javascript. O problema é que, como a página vai comportar vários produtos, será necessário vários dessas divs (motivo pelo qual essas divs recebem classes, e não IDs). O problema é que, apesar de eu ter alcançado o efeito com JQuery/Javascript, ao dar hover na classe, todas as divs sofrem o efeito.
A minha dúvida é: como aplicar esse efeito a apenas a um grupo dessas três divs? Para não haver confusão, como aplicar esse efeito apenas nas divs dentro da 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>