JQuery Hover函数改变了另一个

Question

我有一个与here相关的代码。我有相同类名的锚链接。我的问题是，当我试图悬停“长文”链接时，如何做到这一点不会影响他人？下面的图片显示，当我悬停下方的锚链时，上层也会受到影响。

HTML

$("#tab1").click(function(){
location.hash = 'something';
history.pushState({extraData: "something"}, '', 'new-hash'); 

    $("#page1").show();
});

$("#logo").click(function(){
    $("#page1").hide();
});

window.onpopstate = function() {
alert('How to exclude it on clicking page one?');
$("#page1").hide();
 };

jquery的

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