I found one solution. But the code is bloated. I need to put it in a loop.
Here 3 is the maximum li numbers. How can i put it in a loop? Thanks $(document).ready(function() { $("li.episode:nth-child(3n+0)").hover(function () { this>$('li.episode:nth-child(3n+0) img').addClass("background"); this>$('li.episode:nth-child(3n+0) .details').addClass("show"); },function () { this>$('li.episode:nth-child(3n+0) img').removeClass ("background"); this>$('li.episode:nth-child(3n+0) .details').removeClass ("show"); }); $("li.episode:nth-child(3n+1)").hover(function () { this>$('li.episode:nth-child(3n+1) img').addClass("background"); this>$('li.episode:nth-child(3n+1) .details').addClass("show"); },function () { this>$('li.episode:nth-child(3n+1) img').removeClass ("background"); this>$('li.episode:nth-child(3n+1) .details').removeClass ("show"); }); $("li.episode:nth-child(3n+2)").hover(function () { this>$('li.episode:nth-child(3n+2) img').addClass("background"); this>$('li.episode:nth-child(3n+2) .details').addClass("show"); },function () { this>$('li.episode:nth-child(3n+2) img').removeClass ("background"); this>$('li.episode:nth-child(3n+2) .details').removeClass ("show"); }); });