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

Question

我正在使用一个 3D 旋转按钮，其中每个面都有不同的短语，但两者都是指向同一 URL 的链接。我最初使用普通的旧 css :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 站点，使用 codekit 在编译/缩小时没有 JSHint 错误)那就太棒了。

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