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实际上有一个a标签，不像提供的html：

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>

使用this上下文告诉元素悬停

使用jQuery中的类，Hover不能按预期工作

2 个答案: