Hi I’m Shendi
JS实现css的hover效果,兼容移动端
功能概述
CSS的hover即触碰时触发,在电脑端鼠标触碰,移动端手指触摸
有的时候光靠css实现不了一些效果,例如元素触发hover,其他元素触发动画效果,所以需要使用到js
实现方法
JS想模拟css的hover效果,可以使用鼠标的进入移出事件
此类事件有两种,一种为只对当前元素生效,一种对当前及当元素子元素也生效
var div = document.getELementById("div");
// enter是进入触发,leave移出触发,对子元素不生效,模拟hover使用这种
div.onmouseenter = function () {};
div.onmouseleave = function () {};
// over是进入触发,out是移出触发,对子元素也生效
div.onmouseover = function () {};
div.onmouseout = function () {};
以上方法就可以在电脑端用js模拟css的hover效果了,但在移动端还是有点小问题
移动端的css hover效果是手指短暂触碰即可触发,上面的方法需要长按才能触发
于是可以使用 touch 函数(移动端才有)
var div = document.getELementById("div");
// start按下触发,end抬起触发
div.ontouchstart = function () {};
div.ontouchend = function () {};
上面这两种方法还是不能和移动端hover达到一样的效果,移动端是按下后触发hover,然后抬起不会解除hover,只有点击其他元素才会解除当前hover
于是可以只使用 touchstart,在任意元素按下后解除
当前元素的事件会先执行,然后再执行其他事件,所以要考虑先后问题
代码如下
var div = document.getELementById("div");
// 当前触发的元素,用于解决先后执行的问题
var curEle;
div.ontouchstart = function() {
curEle = this;
};
// 任意元素按下解除hover
document.ontouchstart = function () {
// 这里是解除hover部分
// ...
if (curEle) {
// 这里是显示触摸的hover部分
// ...
// 最后将这一次触摸的元素置空,避免元素无法解除hover
curEle = null;
}
};
最后整合两部分代码,就可以在电脑端,移动端使用js实现css的hover效果了
还有一点小问题,比如移动端按下大概需要1秒才会触发hover,上面的方法是直接触发,有要求可以参考自行处理
最后挂上我实现的效果,hover就隐藏元素显示另一元素,反之则显示回来
sdpro.top
示例部分完整代码,使用JQ方便选择元素
html
<div class="menu">
<a>
<div>
<span>菜单1</span>
</div>
<p>内容1</p>
</a>
<a>
<div>
<span>菜单2</span>
</div>
<p>内容2</p>
</a>
</div>
js文章来源:https://www.toymoban.com/news/detail-405345.html
$(".menu > a").mouseenter(function () {
$($(this).children("div")).slideUp();
$($(this).children("p")).slideDown();
});
$(".menu > a").mouseleave(function () {
$($(this).children("div")).slideDown();
$($(this).children("p")).slideUp();
});
var curEle;
document.ontouchstart = function () {
$(".menu > a > div").slideDown();
$(".menu > a > p").slideUp();
if (curEle) {
$($(curEle).children("div")).slideUp();
$($(curEle).children("p")).slideDown();
curEle = null;
}
};
$(".menu > a").each(function () {
this.ontouchstart = function() {
curEle = this;
};
});
END文章来源地址https://www.toymoban.com/news/detail-405345.html
到了这里,关于JS实现css的hover效果,兼容移动端的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!