jQuery的添加类 - 我已经尝试去除点击类的所有方法 [英] jQuery adding a class - all methods I've tried remove the class on click

问题描述

我用3D旋转按钮，在其每一面都有不同的词组的工作，但两者都指向同一个URL。我最初是用普通的旧的CSS旋转立方体按钮：徘徊，但我注意到，当你点击按钮时复位。如果你的鼠标是不再按钮它应该只转回到其起始位置。

I'm working with a 3D rotating button in which each face has a different phrase, but both are links to the same URL. I initially was rotating the cube button with a plain old css :hover, but I noticed that when you click the button it resets. It should only rotate back to its starting position if your mouse is no longer on the button.

我已经创建了一个使用我所有的标记和造型的笔，我已经尝试添加一个名为翻转到悬停样式类的四种方法，但这些四种方法具有与普通相同的效果旧的CSS：悬停的方法，他们重置鼠标点击。我的评论＃2，3，4出笔仅仅是因为它们都产生相同的结果，首先是只是一个简单的toggleClass'方法。下面是四个JS代码片段和笔的链接。

I have created a pen that uses all of my markup and styling, and I've tried four methods of adding a class called 'flip' to style on hover, but each of these four methods have the same effect as the plain old css :hover method, they reset on a mouse click. I've commented #2, 3, and 4 out in the pen just because they are all yielding the same result, and the first is just a simple 'toggleClass' method. Here's the four JS snippets and a link to the pen.

// #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 /笔/ OPXOxP？编辑= 011

在此先感谢您的帮助/咨询！

Thanks in advance for the help/advice!

PS，如果任何人有任何想法，为什么这将在codePEN工作，但不是我的本地MAMP服务器（编译时，建设一个字preSS网站，使用codeKIT没有JSHint错误/缩小的）这将是超一流。

PS, If anyone has any idea why this would work on codepen but not on my local mamp server (building a wordpress site, using codekit with no JSHint errors when compiled/minified) that would be super.

推荐答案

的问题是，悬停事件如果添加了正在转变的元素从 DIV 周围的按钮，并听取有关悬停在 DIV 那么你不应该有问题。

The problem is that the hover event is on the element that is being transformed if you add a div around the button and listen for the hover on the div then you shouldn't have a problem.

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的：

jQuery:

$('.btnContainter').hover(function () {
    $(this).children('.story-button').toggleClass('flip');
    return false;
);

的 codePEN

这篇关于jQuery的添加类 - 我已经尝试去除点击类的所有方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！