jQuery添加一个类-我尝试过在单击时删除类的所有方法

Question

我正在使用一个3D旋转按钮，在这个按钮中，每个脸都有一个不同的词组，但它们都是指向同一个URL的链接。我最初是用一个普通的旧css :悬浮旋转多维数据集按钮，但我注意到，当您单击该按钮时，它会重置。只有当你的鼠标不再在按钮上时，它才能旋转回它的起始位置。

我已经创建了一支使用我所有标记和样式的笔，我尝试了四种方法添加一个名为“翻转”的类到悬停时的样式，但这四种方法的效果都与普通的旧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，如果有人知道为什么这会在我的本地mamp服务器(构建一个wordpress站点，使用编译/缩小时没有JSHint错误的代码工具包)上工作，那将是超级的。

Answer 1

问题是，如果在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