[英]jQuery adding a class - all methods I've tried remove the class on click
I'm working with a 3D rotating button in which each face has a different phrase, but both are links to the same URL. 我正在使用3D旋转按钮,其中每个面孔都有不同的词组,但是两者都是指向相同URL的链接。 I initially was rotating the cube button with a plain old css :hover, but I noticed that when you click the button it resets.
我最初是使用普通的旧css:hover旋转多维数据集按钮,但是我注意到当您单击按钮时它会重置。 It should only rotate back to its starting position if your mouse is no longer on the button.
如果您的鼠标不再位于按钮上,则它仅应旋转回到其起始位置。
I have created a pen that uses all of my markup and styling, and I've tried four methods of adding a class called 'flip' to style on hover, but each of these four methods have the same effect as the plain old css :hover method, they reset on a mouse click. 我创建了一支使用所有标记和样式的笔,并且尝试了四种在悬停时在样式中添加名为“ flip”的类的方法,但是这四种方法均具有与普通的旧css相同的效果:悬停方法,它们会在单击鼠标时重置。 I've commented #2, 3, and 4 out in the pen just because they are all yielding the same result, and the first is just a simple 'toggleClass' method.
我已经在笔中注释了#2、3和4,只是因为它们都产生相同的结果,而第一个只是简单的“ toggleClass”方法。 Here's the four JS snippets and a link to the pen.
这是四个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');
});
And the link to the pen: http://codepen.io/andandandandrew/pen/OPXOxP?editors=011 以及笔的链接: http : //codepen.io/andandandandrew/pen/OPXOxP?editors=011
Thanks in advance for the help/advice! 在此先感谢您的帮助/咨询!
PS, If anyone has any idea why this would work on codepen but not on my local mamp server (building a wordpress site, using codekit with no JSHint errors when compiled/minified) that would be super. PS,如果有人知道为什么这在Codepen上有效,而在我的本地Mamp服务器上不起作用(构建Wordpress网站,使用在编译/缩小时没有JSHint错误的codekit),那将是超级好的。
The problem is that the hover event is on the element that is being transformed if you add a div
around the button
and listen for the hover on the div
then you shouldn't have a problem. 问题在于,如果您在
button
周围添加div
并在div
上侦听悬停,则悬停事件在要转换的元素上,那么您应该不会有问题。
HTML: 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: CSS:
.btnContainter {
display: block;
width: 15em;
height: 3em;
margin: 0 auto;
}
jQuery: jQuery的:
$('.btnContainter').hover(function () {
$(this).children('.story-button').toggleClass('flip');
return false;
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.