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

Question

我正在使用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），那将是超级好的。

Answer 1

问题在于，如果您在button周围添加div并在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