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添加到所有.post div。我想只为一个div做这个，我将它悬停在它上面。更多链接。

Answer 1

要引用div父级，请使用$(this).parent()代替$(".post")，$(document).ready(function () { $(".more").hover( function () { $(this).parent().addClass("post-hover"); }, function () { $(this).parent().removeClass("post-hover"); }); });选择包含类post的所有元素。

{{1}}

<强> jsFiddle example

Answer 2

尝试这样的事情：http://jsfiddle.net/2GWc2/

<script>
$(function(){
   $(".more").hover(function(){
       $("div.post").removeClass("post-hover");
        $(this).parent().addClass("post-hover");
   });
});
</script>

Answer 3

我已经解决了我的问题，根据@ j08691我应该使用$(this).parent()但如果代码像我的例子，如果我需要引用.post类我应该使用$(this).parents(".post")这个将仅为.post类添加一个新类，其中包含.more链接，代码就是这样。

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

Answer 4

当鼠标悬停在按钮上时，我试图更改按钮的文字颜色。我已经尝试过上面的脚本但是没有用。但是，我这样做了。

HTML代码

<div> 
<button class="buttonClass"> Submit </button> 
</div>

Javascript代码

$(document).on("mouseover",".buttonClass", function(){
    $(this).addClass("name_of_class").mouseleave( function(){ $(this).removeClass("name_of_class"); });
});

CSS代码

.name_of_class {
    background:red;
}

Live Demo

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

4 个答案: