jquery - 如何将 setTimeout 添加到悬停功能？

Question

我发现此效果需要等待几秒钟才能隐藏内容。

var timeout;

function hide() {
    timeout = setTimeout(function () {
        $("#tooltip").hide('fast');
    }, 500);
};

$("#tip").mouseover(function () {
    clearTimeout(timeout);
    $("#tooltip").stop().show('fast');
}).mouseout(hide);

$("#tooltip").mouseover(function () {
    clearTimeout(timeout);
}).mouseout(hide);

div { 
    display: none; 
    background-color: 'yellow';
    border: 1px solid black;
    width: 100px;
    padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="tip" href="#">Tooltip</a>
<div id="tooltip">Tootlip contents</div>

我试图将该功能添加到此代码中:

$(document).ready(function(){
  $("#myvid").hover(function(){
    // Show our tooltip on hover
    $(".tooltip").show();
  }, function(){
    // Hide our tooltip
    $(".tooltip").hide();
  })
});

我这样做了:但没有成功:(

$(document).ready(function(){
    var timeout;

    fuction hide() {
        timeout = setTimeout(function () {
            $("#tooltip").hide('fast');
        }, 500);
    };

  $("#myvid").hover(function(){
    clearTimeout(timeout);
    // Show our tooltip on hover
    //$(".tooltip").show();
    $(".tooltip").stop().show('fast');
  }).hover(hide);
    // Hide our tooltip
  $(".tooltip").hover(function () {
    clearTimeout(timeout);
    $(".tooltip").hide();
  }).hover(hide);
});

这是我的代码，它允许我通过在 iframe 中执行 hover 来显示标题

$(document).ready(function(){
  $("#myvid").hover(function(){
    // Show our tooltip on hover
    $(".tooltip").show();
  }, function(){
    // Hide our tooltip
    $(".tooltip").hide();
  })
});

.tooltip {
  height: 40px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.tooltip .title-background {
  background-color: #000;
  height: 40px;
  left: 0;
  opacity: 0.6;
  position: absolute;
  top: 0;
  width: 100%;
}
.tooltip .title-display {
	color: #fff;
  font-size: 16px;
  font-weight: 500;
  left: 10px;
  position: relative;
  top: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myvid">
      <div class="tooltip" style="display:none;"><div class="title-background"></div><span class="title-display">Movie Title</span></div>
      <iframe width="420" height="345" src="http://www.youtube.com/embed/XGSy3_Czz8k">
      </iframe>
    </div>

如何正确地将该效果添加到我的 jQuery 代码中？

Answer 1

非常基本，但应该可以工作:

$(document).ready(function(){
  let hideTimeout;
  $("#myvid").hover(function(){
    // Show our tooltip on hover
    clearTimeout(hideTimeout);
    $(".tooltip").show();
  }, function(){
    // Hide our tooltip
    hideTimeout = setTimeout(()=>{$(".tooltip").hide()}, 2000);
  })
});

还做了一个 fiddle :https://jsfiddle.net/taL26b3r/2/

但是，您也可以使用 CSS 来解决这个问题，也许更优雅:https://jsfiddle.net/Lmop83g0/