Question

我有两个元素在你独立鼠标悬停时悬停，但我还想在悬停第二个元素（＆＃34; btn＆＃34;）时，第一个元素（＆＃34; i＆＃34;）也被选中并悬停。有不止一个div，所以它应该在每个div中以相同的方式工作。

我首先尝试使用相邻的兄弟选择器，然后使用以下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与所需的类一起使用，因为prev()只是给出了主要的兄弟

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

.i{
  font-size: 20px;
	margin-left: 0;
	-webkit-transition: color 0.8s;
	transition: color 0.8s;  
}	

.i:hover, .hovering{
  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;
}

<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

你去吧

＆＃13;

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

＆＃13;

.i{
  font-size: 20px;
	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,
.hover {
	background-color: #1AC4F8;
	color: #F2F2F2;
}

＆＃13;

<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>

＆＃13;

悬停两个不同的元素

2 个答案: