按钮上的jQuery addClass仅悬停到它的容器div

Question

我想在上面的悬停按钮上添加类到div.当我将鼠标悬停在此按钮时,div将会有一个新课程.

这个HTML代码

<div class='post'><a class='more' href='more'>More</a></div>
<div class='post'><a class='more' href='more'>More</a></div>
<div class='post'><a class='more' href='more'>More</a></div>
<div class='post'><a class='more' href='more'>More</a></div>
<div class='post'><a class='more' href='more'>More</a></div>
<div class='post'><a class='more' href='more'>More</a></div>

我用这个jquery代码来做

 $(document).ready(function(){

$( ".more" ).hover(
  function() {
    $( ".post" ).addClass( "post-hover" );
  }, function() {
    $( ".post" ).removeClass( "post-hover" );
  }
);

            });


});

但是当我将a.more这个jquery代码添加post-hover到所有.postdiv时.我想只为一个div这样做,我将它悬停在它上面.更多链接.

Answer 1

要引用div父级,请使用$(this).parent()而不是$(".post"),选择具有类post的所有元素.

 $(document).ready(function () {
     $(".more").hover(
     function () {
         $(this).parent().addClass("post-hover");
     }, function () {
         $(this).parent().removeClass("post-hover");
     });
 });

jsFiddle例子