gpt4 book ai didi

jquery - jQuery hover() 的第二个函数在 iOS 上不起作用

转载 作者:行者123 更新时间:2023-11-29 11:54:14 27 4
gpt4 key购买 nike

使用以下 jQuery 代码,当触摸设备用户触摸 div 元素时,会出现悬停效果。在他们触摸空白区域后,悬停效果应该消失。

$('div').hover(
function() { $(this).text('hover effect appears') },
function() { $(this).text('') }
);

这在 Android 操作系统上运行良好。但在 iOS 上,悬停效果不会消失。

请参阅demonstration on jsFiddle .

最佳答案

请看这个jsfiddle .在装有 iOS 9.3.5 的 iPad Air 2 上的 Safari 和 Chrome(最新版本)中进行了测试,它的功能符合预期。

HTML:

<head>
<script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div class="hover"></div>
</body>

JS:

$('div.hover').hover(
function() { $(this).text('hover effect appears') },
function() { $(this).text('') }
);

$('div.hover').on('tap', function() {
$('div.hover').text('hover effect appears');
return false;
});

$('body').on('tap', function(e) {
$('div.hover').text('');
});

CSS:

* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

div.hover {
width: 200px;
height: 100px;
border: 1px solid #000;
}


或者,如果您还希望“悬停”效果在用户触摸 <div> 时消失。同样,您可以使用以下 tap事件而不是上面的 tap事件:

$('div.hover').on('tap', function() {
var $div = $('div.hover');

if($div.text().length) {
$div.text('');
}
else {
$div.text('hover effect appears');
}

return false;
});

关于jquery - jQuery hover() 的第二个函数在 iOS 上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39793408/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com