当鼠标悬停在两个按钮之一上时,我想将其翻转颜色。我有以下HTML:

 <div id="PlayerVsComputer" class="checkbox">
  <label><input type="checkbox" class="game">
   <div class="btn-group" role="group">
    <button type="button" class="btn btn-inverse btn-xs">Player</button>
    <button type="button" class="btn btn-classic btn-xs">Computer</button>
   </div>
  </label>
 </div>

 <div id="Player1VsPlayer2" class="checkbox">
  <label><input type="checkbox" class="game">
   <div class="btn-group" role="group">
    <button type="button" class="btn btn-inverse btn-xs">Player 1</button>
    <button type="button" class="btn btn-xs">Player 2</button>
   </div>
  </label>
 </div>


和CSS:

.btn-classic {
  color: black;
  background-color: white;
  }


.btn-inverse {
  color: white;
  background-color: black;
  }


首先,我专注于div容器为id="PlayerVsComputer"的第一个按钮组。我试着通过.btn class选择两个按钮:

var playerVsComputerContainer = $('#PlayerVsComputer .btn');


并将鼠标悬停在两个按钮之一上时创建以下功能:

playerVsComputerContainer.hover(function() {
                   $(this).toggleClass('btn-inverse');
                   $(this).toggleClass('btn-classic');
   });


我意识到playerVsComputerContainer可能是jQuery Object的数组(需要确认的想法),因为在Javascript控制台上,我得到了:

>> $('#PlayerVsComputer button.btn');

Object { 0: button.btn.btn-inverse.btn-xs, 1: button.btn.btn-classic.btn-xs, length: 2, ...


由此,我尝试通过以下操作仅选择一个按钮:

playerVsComputerContainer.hover(function() {
                   $(this)[0].toggleClass('btn-inverse');
                   $(this)[0].toggleClass('btn-classic');
   });


但是$(this)[0]似乎无效。所以我做了上游:

playerVsComputerContainer[0].hover(function() {
                   $(this).toggleClass('btn-inverse');
                   $(this).toggleClass('btn-classic');
   });


不幸的是,这不起作用。我只希望鼠标悬停在2个左右按钮的颜色翻转其初始颜色(黑白)(后来,我希望用户单击鼠标来确认当前颜色的这种变化)。

您可以在此jsfiddle上查看测试



var playerVsComputerContainer = $('#PlayerVsComputer .btn');
playerVsComputerContainer.mouseover(function() {
  $(this).toggleClass('btn-inverse');
  $(this).toggleClass('btn-classic');
  //$(this)[0].toggleClass('btn-inverse');
  //$(this)[0].toggleClass('btn-classic');
});

.btn-classic {
  color: black;
  background-color: white;
}

.btn-inverse {
  color: white;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="PlayerVsComputer" class="checkbox">
  <label><input type="checkbox" class="game">
   <div class="btn-group" role="group">
    <button type="button" class="btn btn-inverse btn-xs">Player</button>
    <button type="button" class="btn btn-classic btn-xs">Computer</button>
   </div>
  </label>
</div>

<div id="Player1VsPlayer2" class="checkbox">
  <label><input type="checkbox" class="game">
   <div class="btn-group" role="group">
    <button type="button" class="btn btn-inverse btn-xs">Player 1</button>
    <button type="button" class="btn btn-classic btn-xs">Player 2</button>
   </div>
  </label>
</div>





更新1:我必须精确地说,当鼠标从左右两个按钮中移出时,我想再次显示原始颜色:是否必须使用hovermouseover

最佳答案

由于相同的函数可以用作handlerIn和handlerOut,因此无需将与第二个参数相同的函数传递给.hover方法。
请参考this以获取jQuery .hover规范。

检查此代码段。
可能这就是您要寻找的行为。
当鼠标悬停在按钮上时,它会切换。
当鼠标移出按钮时,它将切换回原始样式。

在您的html中,类名拼写为btn-clssic
<button type="button" class="btn btn-clssic btn-xs">Computer</button>

您代码中所需的更正为

   playerVsComputerContainer.hover(function() {
                   $(this).toggleClass('btn-inverse');
                   $(this).toggleClass('btn-classic');
   });


可以简化如下。

playerVsComputerContainer.hover(function() {
                       $(this).toggleClass('btn-inverse btn-classic');
       });


请参阅this以获取jQuery toggleClass规范。



$('#PlayerVsComputer .btn').hover(toggle);

   function toggle() {
    $(this).toggleClass('btn-inverse btn-classic');
   }

.btn-classic {
  color: black;
  background-color: white;
}

.btn-inverse {
  color: white;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="PlayerVsComputer" class="checkbox">
  <label><input type="checkbox" class="game">
   <div class="btn-group" role="group">
    <button type="button" class="btn btn-inverse btn-xs">Player</button>
    <button type="button" class="btn btn-classic btn-xs">Computer</button>
   </div>
  </label>
</div>

<div id="Player1VsPlayer2" class="checkbox">
  <label><input type="checkbox" class="game">
   <div class="btn-group" role="group">
    <button type="button" class="btn btn-inverse btn-xs">Player 1</button>
    <button type="button" class="btn btn-classic btn-xs">Player 2</button>
   </div>
  </label>
</div>

09-17 14:50
查看更多