Question

https://codepen.io/siddharthpandestn/pen/rvMKLv

       ` <script>
        $(document).ready(function(){
           $(".button").mouseover(function(){
           $(this).css("background-color", "white");
             }, function(){
            $(this).css("background-color", "pink");
            })
           });
        </script>`

Answer 1

您的选择器$(".button")使用class="button"指定所有元素。

如果您希望选择所有button元素，则需要使用$("button")

Answer 2

通过在其前面加button来引用课程.。当您在寻找button的元素时，它不需要前面的.。

的Javascript

$(document).ready(function() {
  $("button").mouseover(function() {
    $(this).css("background-color", "white");
  });
  $("button").mouseout(function() {
    $(this).css("background-color", "pink");
  });
});

引用此分叉codepen以查看操作中的代码

Answer 3

已经回答了这个问题，请使用这种替代方法

＆＃13;

$(function(){    
    $("button").on({
        mouseover : function(){ $(this).css("background-color", "white"); },
        mouseleave : function(){ $(this).css("background-color", "pink"); },
    });
});

＆＃13;

#menu-pane {
  background-color:#48284A;
}
#menu-bar {
  padding-left:50px;
  padding-bottom:25px;
  padding-top:25px;
  margin-right:0px;
  margin-left:16px;
}

#heading {
  font-family: 'Lobster', cursive;
  color:#FFE1C6;
}

#menu-btn {
  margin-left:auto;
  margin-right:20px;
  margin-top:20px;
}
body {
  background-color:#916C80;
}

#main-body {
  background-color:#FFF7AE;
  margin-left:100px;
  margin-right:100px;
  margin-top:0px;
}

#p1 {
  padding-bottom:50px;
  margin-top:50px;
  padding-left:200px;
  padding-right:10px;
  font-family: 'Gugi';
  color:#48284A;
}

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="menu-pane">
  <div id="menu-bar" class="row">
    <div>
  <h1 id="heading">My Portfolio</h1>
      </div>  
    <div id="menu-btn" class="row">
   <div class="col-xs-7"> <button id="#btn1" style="background:transparent; color:#EDE7F6; margin-right:16px;" class="btn btn-block"> 
      About
    </button> </div> 
    <div class="col-xs-7"><button style="background:transparent; color:#EDE7F6; margin-right:16px;" class="btn btn-block">
    Portfolio
    </button> </div>
     <div class="col-xs-7"> <button style="background:transparent; color:#EDE7F6" class="btn btn-block">
      Contact
    </button> </div> </div>
    </div>
  </div>
<div>
  
<div>
  <body>
    <div id="main-body">
      <div id="body-header" class="row">
      <div class="col-xs-7"><p id="p1" style="font-size:30px">Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.</p> </div>
<div class="col-xs-7"> <img src="https://imgur.com/CRB6iFZ"> </div> </div>
    </div>
  </body>
  
</div>

＆＃13;

jquery html css鼠标悬停或悬停方法不起作用

3 个答案: