const hoversd = new window.HoverSD(element, secondsLaterDoFn, seconds, reNormalFn);
hoversd.secondsHoverEX();
// ...
// other code here
// ...
hoversd.removeElemEventListener();

项目运行

在终端一步一步执行：

git clone git@github.com:vortesnail/hover-seconds-do.git
npm install -g http-server
npm run example

即可查看样例

示例代码

我们拿上面的 gif 做例子：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>example</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div class="box">我是视频
    <div class="test-box">我是视频控制栏</div>
  </div>
  <script src="./index.js"></script>
</body>
</html>

index.css

.box {
  width: 400px;
  height: 200px;
  background-color: lightskyblue;
  text-align: center;
  line-height: 200px;
  color: #fff;
  position: relative;
  /* cursor: none; */
}

.box .test-box {
  position: absolute;
  width: 100%;
  height: 30px;
  left: 0;
  bottom: 0;
  background-color:lightgray;
  text-align: center;
  line-height: 30px;
}

index.js

let box = document.querySelector('.box');

function hiddenTestBox() {
  let textBox = document.querySelector('.test-box');
  textBox.style.display = 'none';
  box.style.cursor = 'none';
}

function showTestBox() {
  let textBox = document.querySelector('.test-box');
  textBox.style.display = 'block';
  box.style.cursor = 'default';
}

let hoversd = new window.HoverSD(box, hiddenTestBox, 2000, showTestBox);
hoversd.secondsHoverEX();
// hoversd.removeElemEventListener();

LICENSE

MIT

Keywords

FAQs

What is hover-seconds-do?

Is hover-seconds-do well maintained?

Last updated on 31 Oct 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install