我正在使用3D旋转按钮，其中每个面孔都有不同的词组，但两者都是指向相同URL的链接。最初，我使用普通的旧css：hover旋转多维数据集按钮，但是我注意到当您单击该按钮时，它会重置。如果您的鼠标不再位于按钮上，则它仅应旋转回到其起始位置。
我创建了一支使用所有标记和样式的笔，并且尝试了四种方法，将一种名为“ flip”的类添加到悬停样式上，但是这四种方法均具有与普通的旧css相同的效果：悬停方法，它们会在单击鼠标时重置。我之所以在笔中注释＃2、3和4只是因为它们都产生相同的结果，而第一个只是简单的“ toggleClass”方法。这是四个JS片段和笔的链接。
// #1 Story Button Toggle Class On Hover To Rotate - Resets on Click
$('.story-button').hover(function () {
$(this).toggleClass('flip');
return false;
});
// #2 Story Button Add/Remove Class On Hover To Rotate - Resets on Click
$('.story-button').hover(
function () {
$(this).addClass('flip');
},
function () {
$(this).removeClass('flip');
}
);
// #3 Story Button Add/Remove Class on 'mouseover To Rotate - F's Up the markup/styles on mouseover
$('.story-button').mouseover(function(){
$(this).removeClass().addClass('flip');
}).mouseout(function(){
$(this).removeClass().addClass('flip');
});
// #4 Story Button Add/Remove Class on 'mouseenter' and 'mouseleave' To Rotate - Still Rotates back on click
$('.story-button')
.mouseenter(function() {
$(this).addClass('flip');
})
.mouseleave(function() {
$(this).removeClass('flip');
});
以及笔的链接：http : //codepen.io/andandandandrew/pen/OPXOxP?editors=011
在此先感谢您的帮助/咨询！
PS，如果有人知道为什么这在Codepen上有效，而在我的本地Mamp服务器上不起作用（构建wordpress站点，使用在编译/缩小时没有JSHint错误的codekit）将是超级好的。
问题是，如果您在div周围添加并在上button侦听悬停，则悬停事件在要转换的元素上，div那么您应该没有问题。
HTML：
<div class="btnContainter">
<button class="story-button">
<a class="front" href="javascript:(void)">FRONT</a>
<a class="back" href="javascript:(void)">BACK</a>
</button>
</div>
CSS：
.btnContainter {
display: block;
width: 15em;
height: 3em;
margin: 0 auto;
}
jQuery的：
$('.btnContainter').hover(function () {
$(this).children('.story-button').toggleClass('flip');
return false;
);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句