我正在尝试创建一个显示图像的悬停事件。在我的台式机/笔记本电脑上,它可以正确启动。但是,在移动设备(触摸屏)上,仅当单击模式链接时,该图像才会显示,然后变为粘性(停留在屏幕上)。
在移动或触摸屏上,我不希望触发悬停事件。
这就是我正在使用的东西。
HTML
<a href="#test" id="test-parent">Hover to show image</a>
<img class="preview" id="test-child" src="https://mayvers.com.au/wp-content/uploads/2017/09/test-image.jpg" />
<script>
$("#test-parent").hover(function() {
$("#test-child").fadeToggle();
});
</script>
CSS
.preview {
display: none;
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
height: 50%;
}
答案 0 :(得分:0)
您可以检查是否为触摸事件,并相应地触发悬停效果。
<script>
$("#test-parent").hover(function() {
if(!isTouchEvent()){
$("#test-child").fadeToggle();
}
});
function isTouchEvent() {
return 'ontouchstart' in document.documentElement
|| navigator.maxTouchPoints > 0
|| navigator.msMaxTouchPoints > 0;
}
</script>
答案 1 :(得分:0)
从@PaulOB到站点点
<script>
if (!("ontouchstart" in document.documentElement)) {
$("#test-parent").hover(function() {
$("#test-child").fadeToggle();
});
}
</script>