Question

I have the following code;

$('.time-span').hover(function () {
    $('.leftRadius,.rightRadius').addClass('hovered');
},
function () {
    $('.leftRadius,.rightRadius').removeClass('hovered'); 
});

My markup looks like this:

<DIV class=leftRadius></DIV>
<A class=time-span ></A>
<DIV class=rightRadius></DIV>

<DIV class=leftRadius></DIV>
<A class=time-span ></A>
<DIV class=rightRadius></DIV>

<DIV class=leftRadius></DIV>
<A class=time-span ></A>
<DIV class=rightRadius></DIV>

How can I edit this to just target one ‘.time-span’ class (there are multiple in my document and I can’t use id’s)?

Thanks

Answer 1

From your markup, I think you want to write a hover for specific sections..

$('.time-span').hover(function () {
    $(this).prev().addClass('hovered');
    $(this).next().addClass('hovered');
},
function () {
    $(this).prev().removeClass('hovered');
    $(this).next().removeClass('hovered');
});

or simply,

$('.time-span').hover(function () {
    $(this).prev().toggleClass('hovered');
    $(this).next().toggleClass('hovered');
});