Наведите два разных элемента:

Question

У меня есть два элемента, которые наведите указатель мыши на них независимо, но я также хочу, чтобы при падении второго элемента («btn») первый («i») также выбирался и зависал. Существует более одного div, поэтому он должен работать одинаково в каждом div.

Я пробовал сначала с помощью CSS с помощью смежных селекторов, а затем со следующим оператором jQuery (с некоторыми вариантами, но без результата).

<div> 
<p class="i">Ilumínate</p> 
<h3>Web Development</h3> 
<p>Professional custom e-commerce and web design...</p> 
<a href="#" class="btn">Read more</a></div> 

CSS

i{ 
    font-size: 60px; 
    margin-left: 0; 
    -webkit-transition: color 0.8s; 
    transition: color 0.8s; 
} 

i:hover{ 
    color: #1AC4F8 
} 

#services [class*="flaticon"]:hover{ 
    color: #1AC4F8 
} 

.btn{ 
    display: inline-block; 
    padding: 5px 10px; 
    border: 2px solid #1AC4F8; 
    color: #1AC4F8; 
    -webkit-transition: color 0.8s, background-color 0.8s; 
    transition: color 0.8s, background-color 0.8s 
} 

.btn:hover{ 
    background-color: #1AC4F8; 
    color: #F2F2F2; 
} 

Jquery

$('#btn').hover(function(){ 
$(this).prev('.i').css("color", "#1AC4F8") }); 

Here's a working fiddle

Answer 1

Воспользоваться prevAll с требуемым классом BECA использовать prev() только дает пред-двойники

$('.btn').on('mouseenter', function(){ 
 
    
 
\t $(this).prevAll('.i:first').addClass('hovering'); 
 
}) 
 
$('.btn').on('mouseleave', function(){ 
 

 
\t $(this).prevAll('.i:first').removeClass('hovering'); 
 
})

.i{ 
 
    font-size: 20px; 
 
\t margin-left: 0; 
 
\t -webkit-transition: color 0.8s; 
 
\t transition: color 0.8s; 
 
} \t 
 

 
.i:hover, .hovering{ 
 
    color: #1AC4F8 
 
} 
 

 

 
#services [class*="flaticon"]:hover{ 
 
\t color: #1AC4F8 
 
} 
 

 
.btn{ 
 
\t display: inline-block; 
 
\t padding: 5px 10px; 
 
\t border: 2px solid #1AC4F8; 
 
\t color: #1AC4F8; 
 
\t -webkit-transition: color 0.8s, background-color 0.8s; 
 
\t transition: color 0.8s, background-color 0.8s 
 
} 
 

 
.btn:hover{ 
 
\t background-color: #1AC4F8; 
 
\t color: #F2F2F2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <p class="i">Ilumínate 1</p> 
 
    <h3>Web Development</h3> 
 
    <p>Professional custom e-commerce and web design to let your business grow at a rapid pace. See how we do that.</p> 
 
    <a href="#" class="btn">Read more</a> 
 
</div> 
 

 
<div> 
 
    <p class="i">Ilumínate 2</p> 
 
    <h3>Web Development</h3> 
 
    <p>Professional custom e-commerce and web design to let your business grow at a rapid pace. See how we do that.</p> 
 
    <a href="#" class="btn">Read more</a> 
 
</div>

Answer 2

Здесь вы идете

$(".btn").mouseover(function() { 
 
    $(this).siblings(".i").toggleClass("hover"); 
 
}); 
 
$(".btn").mouseleave(function() { 
 
    $(this).siblings(".i").toggleClass("hover"); 
 
});

.i{ 
 
    font-size: 20px; 
 
\t margin-left: 0; 
 
\t -webkit-transition: color 0.8s; 
 
\t transition: color 0.8s; 
 
} \t 
 

 
.i:hover{ 
 
    color: #1AC4F8 
 
} 
 

 
#services [class*="flaticon"]:hover{ 
 
\t color: #1AC4F8 
 
} 
 

 
.btn{ 
 
\t display: inline-block; 
 
\t padding: 5px 10px; 
 
\t border: 2px solid #1AC4F8; 
 
\t color: #1AC4F8; 
 
\t -webkit-transition: color 0.8s, background-color 0.8s; 
 
\t transition: color 0.8s, background-color 0.8s 
 
} 
 

 
.btn:hover, 
 
.hover { 
 
\t background-color: #1AC4F8; 
 
\t color: #F2F2F2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <p class="i">Ilumínate</p> 
 
    <h3>Web Development</h3> 
 
    <p>Professional custom e-commerce and web design to let your business grow at a rapid pace. See how we do that.</p> 
 
    <a href="#" class="btn">Read more</a> 
 
</div> 
 
<div> 
 
    <p class="i">Ilumínate</p> 
 
    <h3>Web Development</h3> 
 
    <p>Professional custom e-commerce and web design to let your business grow at a rapid pace. See how we do that.</p> 
 
    <a href="#" class="btn">Read more</a> 
 
</div>