当鼠标从一个到另一个按钮时，将两个按钮的颜色侧面更改

Question

从这篇文章中，当鼠标越过它们时，我可以将两个按钮的颜色侧面换成。

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>

和使逆转的JavaScript：

// Flip buttons color when mouse is over buttons
$('#PlayerVsComputer .btn').hover(toggle, toggle);
function toggle() {
  $.each($('#PlayerVsComputer .btn'), function(index, value) {
    $(value).toggleClass('btn-inverse btn-classic');
  });
}

现在，我希望当我来自另一个时，即鼠标仍在 btn-group时，即在 button上。

在我的上述代码中，我将鼠标从按钮移到另一个按钮的情况不被处理：我必须打开按钮，然后离开BTN组才能恢复原始颜色状态。

类似的行为也是CSS的行为。:hover＆quot属性，但就我而言，我同时将两个按钮的颜色倒转。

这是我必须修改以获取想要的东西的JS小提琴：

使倒转颜色

更新1

遵循Mosh Feu建议的解决方案，它几乎可以正常工作：当我从两个按钮之一上将鼠标从外部移动时，颜色正在正确变化。当我将鼠标放在两个按钮之一中时，原始状态也恢复良好（左键为黑色和右键为白色）。

其他细节：当鼠标已经在按钮上时，我将其移至附近的另一个按钮（我精确地不在BTN组之外，即呆在该区域时2个按钮），在这种情况下，颜色不会倒置。

我怀疑这个问题可能来自两个按钮之间的一个很小的空间：通常，使用Bootsrap和btn-group class，不应该有这个空间，两个按钮是没有空间的。

当我不使用Mouseleave时，您可以看到结果：

无慕斯

当我使用您的建议时，即：

var buttons = $('#PlayerVsComputer .btn').mouseenter(toggle).mouseout(restore);

使用Mouseout

目前，我不知道如何处理两种方法将它们结合在一起。（我将要进行包括Bootstrap CS的测试，因为这个小空间，在两个按钮之间，以JS小提琴出现）。

更新2

从下面的mosh feu的解决方案中，我认为问题是因为一个人（当调用还原函数时）：

$('#PlayerVsComputer').mouseleave(restore);

而不是：

$('#PlayerVsComputer .btn').mouseenter(toggle).mouseout(restore);

以这种方式，直到鼠标不在<div id="PlayerVsComputer">上为止，切换功能是在按钮上使用的，因此仅在鼠标在<div id="PlayerVsComputer">块之外时才调用restore。

但是两个按钮之间的小空间呢？JQuery如何处理？为什么鼠标在此空间上没有变化？

Answer 1

如果我正确理解您，这是我的方法。如果没有，请纠正我。

// Flip buttons color when mouse is over buttons
var buttons = $('#PlayerVsComputer .btn').mouseenter(toggle)
$('#PlayerVsComputer').mouseleave(restore);
function toggle() {
  buttons.each(function(index, value) {
    $(value).toggleClass('btn-inverse btn-classic');
  });
}
function restore() {
  buttons.eq(0).removeClass('btn-classic').addClass('btn-inverse');
  buttons.eq(1).removeClass('btn-inverse').addClass('btn-classic');
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.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>

Answer 2

尝试以下代码：

html：

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

CSS：

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

JS：

 $('#PlayerVsComputer .btn').on('mouseover', function() {
      $('#PlayerVsComputer .btn').removeClass('btn-inverse');
      $(this).addClass('btn-inverse');
 }); 
 $('#PlayerVsComputer .btn').on('mouseleave', function() {
      $('#PlayerVsComputer .btn').removeClass('btn-inverse');
 });