Всем здоровья!
Создал 4 блока с одинаковыми наименованиями классов. При наведении мыши на cсылку применяется стиль рамка к остальным блокам. Можно остальные 3 блока переименовать в другие классы, но так не хочу. Будет слишком много возни.
Каким образом можно сделать так, чтобы при наведении курсора стиль border
применялся только к текущему элементу, а не ко всем подряд с такими же именами?
$(document).ready(function(){
$('.text').mouseenter(function (){
$('.page').addClass("border");
});
$('.text').mouseleave(function (){
$('.page').removeClass("border");
});
});
.page{
width: 250px;
height: 300px;
margin:30px;
position: relative;
border: 0.4vmax solid white;
border-radius: 0.3em;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
display: inline-block;
}
.text{
position: relative;
text-align: center;
font-size: 20px;
}
a{
text-decoration: none;
color:black;
}
.border{
border: 3px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page" >
<div class="text">
<a href="#">Ссылка</a>
</div>
</div>
<div class="page" >
<div class="text">
<a href="#">Ссылка</a>
</div>
</div>
<div class="page" >
<div class="text">
<a href="#">Ссылка</a>
</div>
</div>
<div class="page" >
<div class="text">
<a href="#">Ссылка</a>
</div>
</div>