Question

我想在元素悬停2秒或更长时间时显示一个tootip。我该怎么办？

Answer 1

var startTime, endTime;


function handlerIn() {
  startTime = new Date();
}

function handlerOut() {
  endTime = new Date();
  var timeDiff = endTime - startTime; //in ms
  // strip the ms
  timeDiff /= 1000;

  // get seconds
  var seconds = Math.round(timeDiff % 60);
  console.log("hover during " + seconds + " sec");
}

.hover {
  background-color: red;
  width: 100px;
  height: 100px;
}

<div class="hover" onmouseenter="handlerIn()" onmouseleave="handlerOut()">HOVER ME</div>

<div id="seconds"></div>

Answer 2

您可以使用onmouseenter="fn()"和onmouseout="fn()"检查输入时间和退出时间。这是一个简单的方法，它还以毫秒为单位显示时间！

＆＃13;

var time = 0;
var hover = 0;
var out = 0;

function getInTime() {
  hover = Date.now();
}

function getOutTime() {
  out = Date.now();
  time = out-hover;
  document.getElementById('time').innerHTML = " Show hover time: " + time + 'ms';
}

＆＃13;

<button onmouseout="getOutTime()" onmouseenter="getInTime()" >Hover Here</button>
<br /><br />
<button id="time">Hover Time</button>

＆＃13;

Answer 3

您可以对onmouseover和onmouseout事件使用setTimeout（）方法。

工具提示css： http://www.w3schools.com/howto/howto_css_tooltip.asp

setTimeout方法：http://www.w3schools.com/jsref/met_win_settimeout.asp

<div id="example" class="tooltip" onmouseover="start()"  onmouseout="stop()">example text</div>

let t, hoverTime=2000;

function start(){
    t = setTimeout('showTooltip()', hoverTime); 
}

function showTooltip(){
    let node = document.createElement("span");
    let textnode = document.createTextNode("Tooltip text");
    node.className='tooltiptext';
    node.appendChild(textnode);
    document.getElementById("example").appendChild(node);
}

function stop(){
    clearTimeout(t);
    if(document.getElementById("example").childNodes[1]){
        document.getElementById("example").removeChild(document.getElementById("example").childNodes[1]);
    }
}

如何检查你在纯JavaScript中悬停元素的时间？

3 个答案: