No signal No signal - 3 months ago 11
Javascript Question

hover don't work as expected with classes in jQuery

I want to to translate each of these elements with the same class .. for example if i hovered one of these classes i want just the class hovred to be translated not all of them .. there 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 youu !

Answer

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