jQuery添加一个类 – 我尝试过的所有方法都会在点击时删除该类

我正在使用3D旋转按钮，其中每个面具有不同的短语，但两者都是指向同一URL的链接。 我最初用一个普通的旧css旋转立方体按钮：hover，但我注意到当你点击按钮时它会重置。 如果鼠标不再位于按钮上，它应该只能旋转回其起始位置。

我创建了一个使用我所有标记和样式的笔，我尝试了四种方法在hover时添加一个名为“flip”的类来设置样式，但这四种方法中的每一种都与普通的旧css具有相同的效果：hover方法，它们在鼠标单击时重置。 我在笔中评论了＃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），这将是超级的。

Answer 1

问题是，如果你在button周围添加一个div并在div上侦听hover，那么hover事件就在正在转换的元素上，那么你应该没有问题。

HTML：

 
  FRONT BACK   

CSS：

 .btnContainter { display: block; width: 15em; height: 3em; margin: 0 auto; } 

jQuery的：

 $('.btnContainter').hover(function () { $(this).children('.story-button').toggleClass('flip'); return false; ); 

codePen