当前位置:主页 > JavsScript库 > 其它 >

在悬停时向元素添加自定义类 - multi-device-hover.js
栏目分类:其它   发布日期:2021-09-17   浏览次数:

CSS:hover选择器的JavaScript 替代方案,可在悬停和触摸点击时将自定义类应用于任何 DOM 元素。

使用:

1. 安装并导入 MultiDeviceHover。

# NPM
$ npm i multi-device-hover
import MultiDeviceHover from 'multi-device-hover';

2. 或者在页面中包含 mdh.min.js。

<script src="dist/standalone/mdh.min.js"></script>

3. 在您的元素上初始化 MultiDeviceHover。这将is-hover在悬停时添加一个名为元素的 CSS 类。

const targetEle = document.querySelectorAll('#myElement');
MultiDeviceHover.init(targetEle);

4. 悬停时,您还可以将多个 CSS 类应用于元素。

const targetEle = document.querySelectorAll('#myElement');
MultiDeviceHover.init(targetEle,{
  hoverClass: ['is-hover', 'is-hover-2', 'is-hover-3']
});

5. 销毁实例。

MultiDeviceHover.destroy(targetEle);

6. 回调函数。

MultiDeviceHover.init(targetEle,{
  onEnter: (element,mouseEvent) => {
    console.log(element,mouseEvent);
  },
  onLeave: (element,mouseEvent) => {
    console.log(element,mouseEvent);
  },
  onDestroy: (element) => {
    console.log("Destoy:");
  }
});

官方网站:https://github.com/sk-rt/multi-device-hover

相关热词: 悬停效果

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库