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

Question

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

我创建了一支使用我所有标记和样式的笔，并且我尝试了四种方法来添加一个名为“翻转”的类以在悬停时设置样式，但这四种方法中的每一种都与普通方法具有相同的效果旧的 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 那么你应该没有问题。

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