懸停不能按預期的方式與jQuery中的類一起工作

Question

我想用相同的類翻譯這些元素中的每一個。例如，如果我將這些類中的一個懸停，我只想將類翻譯成不是全部他們..這裏是我的代碼：

<div class="latestNewsHeadLines"> 

<ul> 

    <li class="headlineCl">text1</li> 
    <li class="headlineCl">text2</li> 
    <li class="headlineCl">text3</li>  
    <li class="headlineCl">text4</li>  

</ul> 

</div> 

jQuery代碼：

$(".headlineCl").hover(function(){ 

    var Length = $(this).width(); 
    var transRight = -(Length -245) ; 


    $(".headlineCl a").css({'right':transRight+"px"}) 


}); 

謝謝！

Answer 1

如果您的HTML實際上已經不像提供的HTML標籤a：

Codepen

$(".headlineCl").hover(function(){ 
    var Length = $(this).width(); 
    var transRight = -(Length -245) ; 
    // `this` refers to the selector to which 
    // your hover function is attached 
    $(this).find('a').css({'right':transRight+"px"}) 
}); 

否則，您可以使用：

$(".headlineCl").hover(function(){ 
    var Length = $(this).width(); 
    var transRight = -(Length -245) ; 
    // `this` refers to the selector to which 
    // your hover function is attached 
    $(this).css({'right':transRight+"px"}) 
}); 

Answer 2

$(".headlineCl").hover(function(){ 
 

 
    var Length = $(this).width(); 
 
    var transRight = -(Length -245) ; 
 
    
 
    $("a").css('color','black')//put color black on all anchor element(remove red color) 
 
    $("a",this).css('color','red')// use this context to tell the hovered element. this will put color red to hovered element 
 

 

 
});

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

 
<ul> 
 

 
    <li class="headlineCl"><a>text1</a></li> 
 
    <li class="headlineCl"><a>text2</a></li> 
 
    <li class="headlineCl"><a>text3</a></li>  
 
    <li class="headlineCl"><a>text4</a></li>  
 

 
</ul> 
 

 
</div>

1. 使用this方面告訴正在徘徊