Вот макет
При наведении на "Смотреть проект" эта ссылка выезжает влево и высвечивает ссылку "Дополнительно". Но на мобильном устройстве при нажатии пальцем на "Смотреть проект" происходит событие нажатия на ссылку "Смотреть проект" соответственно, и выбрать и нажать на ссылку "Дополнительно" не возможно. Нужна возможность "выбрать на какую ссылку нужно нажать". Как реализовать такой функционал для мобильных устройств.
Вот 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");
});
}