Hover doesn't work as expected with classes in jQuery

Question

I want to to translate each of these elements with the same class .. for example if I hover one of these classes I want just the class hovered to be translated not all of them .. Here is my code :

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

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

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


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


});

Thank you!

hahah yes .. i made a mistake whrn typing but it should to be there — No signal
– No signal, Commented Aug 23, 2016 at 4:06

Derek Story · Accepted Answer · 2016-08-23 04:04:35Z

2

If your html actually has an a tag unlike the provided 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"})
});

Otherwise, you can use:

$(".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"})
});

edited Aug 23, 2016 at 4:04

answered Aug 23, 2016 at 3:53

Derek Story

9,5831 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

guradio · Accepted Answer · 2016-08-23 03:53:57Z

$(".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>

Use this context to tell the element being hovered

Collectives™ on Stack Overflow

Hover doesn't work as expected with classes in jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related