Невозможно удержать кнопки от исчезновения после зависания соседнего элемента - PullRequest
Новая
       33

Невозможно удержать кнопки от исчезновения после зависания соседнего элемента

0 голосов
/ 25 июня 2018

Мне кажется, что я упускаю что-то очевидное, но я не могу найти лучший способ сделать это так, чтобы кнопки под изображением не исчезали, когда вы наводите курсор на упомянутое изображение.Что должно произойти, так это то, что вы наводите курсор на изображение, чтобы показать кнопки, позволяющие нажимать на них.При наведении курсора на кнопки только тогда они должны исчезнуть.

Я пытался использовать mouseenter и mouseleave, а также то, что показано ниже (что я нашел из примера в Интернете).Я также попытался добавить дополнительные отступы под изображениями, чтобы увеличить область наведения без удачи.

Я чувствую себя настолько глупым, но это заставило меня весь день быть в тупике.

Codepen: https://codepen.io/gojiHime/pen/eKKroR?editors=0111

jQuery: 

$(document).ready(function() {
  $(".thumb").each(function() {
    $(this).hover(
      function() {
        $learn = $(this)
          .parent()
          .prev();
        $cta = $(this).next();
        $learn.stop(true, true).fadeIn();
        $cta.stop(true, true).fadeIn();
      },
      function() {
        $learn = $(this)
          .parent()
          .prev();
        $cta = $(this).next();
        $learn.stop(true, true).fadeOut();
        $cta.stop(true, true).fadeOut();
      }
    );
  });
});

1 Ответ

0 голосов
/ 25 июня 2018

Вы используете display:none; на своих кнопках.Вы прячете их со страницы, где нет возможности «парить» над ними.Вместо этого используйте opacity, чтобы скрыть кнопки, оставляя их доступными для вашего курсора.

Вам также не нужно циклически перемещаться по элементам селектора, поскольку jQuery уже делает это за вас.Таким образом, вы можете уменьшить свой код jQuery.

css 

.learn-more {
  opacity: 1;
  /* your other css */
}

js 

$(document).ready(function() {
  $('.inner').hover(function() {
    $(this).find('.learn-more').css({'opacity':'1'})
  }, function(){
    $(this).find('.learn-more').css({'opacity':'0'})
  });
});
...