网站建设单词,济南网站建设网站,网站迁移建设方案,推荐一个可以看片儿的浏览器Hi I’m Shendi JS实现css的hover效果#xff0c;兼容移动端 功能概述
CSS的hover即触碰时触发#xff0c;在电脑端鼠标触碰#xff0c;移动端手指触摸 有的时候光靠css实现不了一些效果#xff0c;例如元素触发hover#xff0c;其他元素触发动画效果#xff0c;所以需要…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部分// ...// 最后将这一次触摸的元素置空,避免元素无法解除hovercurEle null;}
};最后整合两部分代码就可以在电脑端移动端使用js实现css的hover效果了 还有一点小问题比如移动端按下大概需要1秒才会触发hover上面的方法是直接触发有要求可以参考自行处理 最后挂上我实现的效果hover就隐藏元素显示另一元素反之则显示回来 sdpro.top 示例部分完整代码使用JQ方便选择元素
html
div classmenuadivspan菜单1/span/divp内容1/p/aadivspan菜单2/span/divp内容2/p/a
/divjs
$(.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
