当鼠标悬停在两个按钮之一上时,我想将其翻转颜色。我有以下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:我必须精确地说,当鼠标从左右两个按钮中移出时,我想再次显示原始颜色:是否必须使用
hover
或mouseover
? 最佳答案
由于相同的函数可以用作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>