jQuery добавляет класс - все методы, которые я пробовал, удаляют класс при нажатии

Я работаю с трехмерной вращающейся кнопкой, в которой каждое лицо имеет другую фразу, но оба являются ссылками на один и тот же 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 с использованием codekit без ошибок JSHint при компиляции/минификации), это было бы супер.


javascript button jquery flip toggleclass
person andandandandrew    schedule 18.12.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Проблема в том, что событие наведения находится на трансформируемом элементе, если вы добавите div вокруг button и прослушаете наведение на 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

person imtheman    schedule 18.12.2014
comment
Итак, это работает почти идеально. Я обновил свою ручку, чтобы использовать версию toggleClass с вашими обновлениями и показать вам, как будут использоваться эти кнопки. Теперь проблема в том, что когда вы наводите курсор на любую кнопку (класс = кнопка-контейнер), она переворачивает все кнопки с этим классом. Есть ли способ настроить таргетинг только на тот, на который вы наводите курсор? - person andandandandrew; 20.12.2014
comment
Кроме того, есть подсказки, почему это будет работать в codepen с той же разметкой, что и в моем шаблоне WordPress? Вот ссылка на скриншот разметки, которую выдает PHP: i.imgur.com/mPphpAH.png< /а> - person andandandandrew; 20.12.2014
comment
Ты сумасшедший волшебник! Перо работает само по себе, но я сделал новое перо, которое на самом деле имитирует шаблон страницы, который я создал для этого. В основном эта функция JS происходит внутри доски каменной кладки. Взгляните на эту новую ручку, и если у вас есть какое-то представление о том, что с ней происходит, вы наверняка получите признание на этом сайте. codepen.io/andandandandrew/pen/EagxeL - person andandandandrew; 22.12.2014
comment
Да, я видел тот, который отлично работает, когда он не внутри каменного контейнера. Взгляните на это новое перо, если не возражаете, где я использовал эту функцию, но она не переключает класс, потому что (я полагаю) кнопки находятся внутри каменной доски. Новое перо: codepen.io/andandandandrew/pen/EagxeL - person andandandandrew; 23.12.2014
comment
@andandandandrew Проблема заключалась в том, что ваш метод наведения был на .btnContainter, а не на .flip-container. codepen.io/anon/pen/xbExNy - person imtheman; 23.12.2014
comment
Господи, я тупой. Огромное спасибо! - person andandandandrew; 23.12.2014
comment
@andandandandrew Нет проблем. Рад, что смог помочь. - person imtheman; 23.12.2014