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