我正在使用一个 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 http://codepen.io/andandandandrew/pen/OPXOxP?editors=011
预先感谢您的帮助/建议!
PS,如果有人知道为什么这可以在 codepen 上工作,但不能在我的本地 mamp 服务器上工作(构建一个 wordpress 站点,使用 codekit 在编译/缩小时没有 JSHint 错误),那就太棒了。
问题是,如果您添加一个,则悬停事件位于正在转换的元素上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;
);
codePen http://codepen.io/anon/pen/zxBPma
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)