Событие наведения, но не на сенсорных/мобильных устройствах

katrin1988

Всем привет, Я пытаюсь создать событие наведения, которое показывает изображение.

На моем рабочем столе/ноутбуке все работает правильно.

Однако на мобильном телефоне (сенсорное) изображение появляется только при нажатии на модальную ссылку, а затем оно прикрепляется (оно остается на экране). На мобильных устройствах или сенсорных экранах я не хочу, чтобы событие наведения сработало. Вот с чем я работаю.

Джсфиддл
https://jsfiddle.net/postcolonialboy/pxwd34ka/4/

HTML

 .preview {

display: none;

position: absolute;

bottom: 0;

right: 0;

z-index: 1;

height: 50%;
}

HTML: CSS

 <a href="#test" id="test-parent">Hover to show image</a> <img class="preview" id="test-child" src="[URL='https://lumtu.com/yti/cgaagcGdodHRwczovL21heXZlcnMuY29tLmF1L3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE3LzA5L3Rlc3QtaW1hZ2Uu2Zh']https://mayvers.com.au/wp-content/uploads/2017/09/test-image.jpg[/URL]" /> <script> $("#test-parent").hover(function() { $("#test-child").fadeToggle(); }); </script>

Код (CSS):

TRUS

Хорошим началом было бы отказаться от использования JavaScript (а тем более отупляющего уныния, которым является jQuery) для выполнения работы CSS. Шаг 1. Удалите весь мусор, который не нужен разметке.

 
.hoverNext + img {
position:absolute;
bottom: 0;
right:100vw;
height:50%;
z-index:1;
opacity:0;
transition:right 0s 0.5s, opacity 0.5s;
}

.hoverNext:hover + img {
right:0;
opacity:1;
transition:right 0s, opacity 0.5s;
}

Код (разметка): Шаг 2. Пусть CSS сделает всю тяжелую работу.

  <a href="#test" class="hoverNext">Hover to show image</a> <img src="/wp-content/uploads/2017/09/test-image.jpg" alt="опишите это, alt не является обязательным!" >

Код (разметка): поскольку в мобильном телефоне НЕТ состояний наведения, он ничего не будет делать.

Обратите внимание: я не уверен, что это должен быть якорь, но я пока оставил его в покое.

Это не было задачей JavaScript с тех пор, как мы перестали заботиться о IE7/раньше.

Само присутствие «fadeToggle» в умственной пыхтящей карлике jQuery — это всего лишь голубиный помет на памятнике невежеству, некомпетентности и неумелости, которыми являются интерфейсные фреймворки.

Похожие темы	Дата
[Академия верстки] PHP-разработчик (2019)	19.10.2024, 18:10
Что такое PaxCompiler	19.10.2024, 18:10
Настройки приложения в стиле Microsoft	19.10.2024, 18:10
Работа с протоколом SyncML Delphi	19.10.2024, 18:10
Хранение в БД PDF,TIFF и DOCX	19.10.2024, 18:10
Android™ Notes for Professionals	19.10.2024, 18:10
Check a signature in XAdES, PAdES or CAdES format with TMS Cryptography Pack by Marion Candau	19.10.2024, 18:10
Serializing Generic Object Lists with TJson by Uwe Raabe	19.10.2024, 18:10
DLL Injection with Delphi by Darian Miller	19.10.2024, 18:10
Delphi 10.4: Code completion matches anywhere…	19.10.2024, 18:10

Событие наведения, но не на сенсорных/мобильных устройствах

katrin1988

TRUS

I AM

Интересно