0

Вот макет

введите сюда описание изображения

При наведении на "Смотреть проект" эта ссылка выезжает влево и высвечивает ссылку "Дополнительно". Но на мобильном устройстве при нажатии пальцем на "Смотреть проект" происходит событие нажатия на ссылку "Смотреть проект" соответственно, и выбрать и нажать на ссылку "Дополнительно" не возможно. Нужна возможность "выбрать на какую ссылку нужно нажать". Как реализовать такой функционал для мобильных устройств.

Вот HTML

<p class="show_link_wrapp"><a href="#" class="show_link">Смотреть проект</a><a href="#" class="add_link">Дополнительно</a></p>

Вот CSS

.show_link_wrapp {
    padding-right: 0;
}

.show_link_wrapp .show_link {
    display: inline-block;
    vertical-align: top;
    position: relative;
    z-index: 2;
}

.show_link_wrapp .add_link {
    position: absolute;
    bottom: 5px;
    right: 0;
}

.show_link_wrapp:hover {
    padding-right: 176px;
}

Вот JS который я начал писать. Если есть решения лучше - то пожалуйста предложите.

  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {

      $(".show_link_wrapp")
      .mousedown()(function(e) {
        e.preventDefault();
        $(this).addClass("over");
      })
      .mouseleave(function() {
        $(this).removeClass("over");
      });
  }

1 ответ 1

0

Скобки после mousedown уберите

  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {

      $(".show_link_wrapp")
      .mousedown(function(e) {
        e.preventDefault();
        $(this).addClass("over");
      })
      .mouseleave(function() {
        $(this).removeClass("over");
      });
  }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.