2

Всем здоровья!

Создал 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>

0

2 ответа 2

1

Через селектор $('.page') вы обращаетесь ко всем элементам с таким классом на странице...

Найти элемент среди родителей можно при помощи $(this).closest(...)

$(document).ready(function(){

  $('.text').mouseenter(function (){
    $(this).closest('.page').addClass("border");
  });	

  $('.text').mouseleave(function (){
    $(this).closest('.page').removeClass("border");	
  });	

});
.page {
  width: 250px;
  height: 50px;
  margin: 15px;
  border: 3px solid white;
  border-radius: 0.3em;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  display: inline-block;
}

.text {
  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>

9
  • Через hover не интересно(( Хотелось бы это реализовать на jquery. 2 июн 2019 в 20:20
  • эм, а смысл использовать библиотеки там, где это не требуется? 2 июн 2019 в 20:20
  • Я люблю экспериментировать) Если вам не трудно, то пожалуйста помогите мне. 2 июн 2019 в 20:22
  • @Black_Viper Конечно вам рады будут помочь, но не все могут разделить ваше желание поэкспериментировать, хотя бы по причине недостатка времени. Пожалуйста, примите ответ, если он помог решить вашу задачу.
    – 0xdb
    2 июн 2019 в 20:34
  • Благодарю) Я бы хотел еще кое-чем поинтересоваться. Данным методом вы обращаетесь к родительскому элементу "Text". А если поверх элемента "text" будут еще два элемента "Page"(родительский элемент "text") и "Block"(родительский элемент "Page") Что нужно дописать чтобы обратится к "Block" и применить стиль рамку. 2 июн 2019 в 20:42
0

Можно либо с помощью добавления класса или самого стиля

$(document).ready(function(){
  $('.text').mouseenter(function (){
    $(this).parents( ".page" ).toggleClass( "border" );
  });	

  $('.text').mouseleave(function (){
    $(this).parents( ".page" ).toggleClass( "border" );
  });	
});
.page{
width: 110px;
height: 50px;
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: 1.5vmax;	
}

a{
text-decoration: none; 
color:black;
}


.border{
 border: 3px solid black; 
}
.image-bag{
background: red;	
}
<!DOCTYPE html>

<html>



    <head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	</head>

<body>

  
<div class="page" >
<div class="image-bag" >
<div class="text">
<a href="#">Ссылка</a>
</div>
</div>
</div> 
  
<div class="page" >
<div class="image-bag" >
<div class="text">
<a href="#">Ссылка</a>
</div>
</div>
</div>
    
<div class="page" >
<div class="image-bag" >
<div class="text">
<a href="#">Ссылка</a>
</div>
</div>
</div> 
   
<div class="page" >
<div class="image-bag" >
<div class="text">
<a href="#">Ссылка</a>
</div>
</div>
</div> 

  
 
</body>
</html>

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.