JQuery Hover函數更改另一個

Question

我有一個代碼相關here。我有相同的類名相同的錨鏈接。我的問題是，如何做到這一點，當我嘗試懸停'長文本'鏈接時不會影響其他人？下圖顯示，當我將錨點鏈接懸停在上方時，也會受到影響。

HTML

<a class="short-text">Short Text</a> 
<a class="long-text">Long Text Here</a> 

<a class="short-text">Short Text</a> 
<a class="long-text">Long Text Here</a> 

jQuery的

$(".long-text").hover(function(){ 
$('.short-text').css('color','orange') 
},function(){ 
$('.short-text').css('color','black') 
}); 

Answer 1

您應該使用prev()方法像以下。

$(".long-text").hover(function() { 
 
    $(this).prev('.short-text').css('color', 'orange') 
 
}, function() { 
 
    $(this).prev('.short-text').css('color', 'black') 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="short-text">Short Text</a> 
 
<a class="long-text">Long Text Here</a> 
 

 
<a class="short-text">Short Text</a> 
 
<a class="long-text">Long Text Here</a>

Answer 2

在這裏你去...

$(".long-text").hover(function(){ 
 
$(this).prev().css('color','orange') 
 
},function(){ 
 
$(this).prev().css('color','black') 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a class="short-text">Short Text</a> 
 
<a class="long-text">Long Text Here</a> 
 

 
<a class="short-text">Short Text</a> 
 
<a class="long-text">Long Text Here</a>