Javascript 悬停div鼠标退出时超时/衰减延迟？

我有一个

div

，当你把鼠标悬停在它上面时，另一个会出现在它的位置上

但是，当您将

div

的

mouseout

移出时，另一个

div

也会消失

我需要显示的

div

能够挂起足够长的时间，以便将鼠标拖到其上，然后一旦鼠标位于出现的

div

上，它就需要保持可见，以便您可以单击链接并阅读文本，然后在

mouseout

上消失

我确信这可以用JavaScript实现，但我不知道如何实现

如果它有很大的不同，我相信它可能会，它将在一个JCINK论坛上进行，所以JavaScript可能会受到限制。如果有任何方法可以在CSS中实现，那就更好了

#a:hover + #b {
    opacity: 1;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
}
#c:hover ~ #d {
    opacity: 1;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
}
#e:hover + #f {
    opacity: 1;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
}
#g:hover ~ #h {
    opacity: 1;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
}

这是我目前用来实现悬停的CSS

我的javascript当前如下所示：

<script type="text/javascript" >
document.getElementById('b').onmouseover = function(){
    document.getElementById('a').style.opacity=1;
}

document.getElementById('b').onmouseout = function(){
    document.getElementById('a').style.opacity=0;
} 


$('#a').hover(
  function(){
       $('#d').css('opacity', '1')
   }, 
   function() { 
       $('#d').css('opacity', '')

});

</script>

document.getElementById（'b'）。onmouseover=function（）{
document.getElementById（'a'）.style.opacity=1；
}
document.getElementById（'b'）.onmouseout=function（）{
document.getElementById（'a'）.style.opacity=0；
} 
$（'a'）。悬停(
函数（）{
$（'#d'）.css（'opacity'，'1'））
}, 
函数（）{
$（'#d'）.css（'opacity'，''）
});

创建CSS类后，比如说

.fade

（使用CSS代码进行转换等），按照以下方法操作

.hidden {
    display: none;
}

---

编辑

---

---

---

我将主持悬停div
覆盖内容

您能描述一下您计划如何在论坛中包括/使用它吗？我认为，如果你能嵌入HTML和/或CSS，你也能嵌入JS

与“hover”属性不同，我将使用“onmouseover”属性作为入口，使用“onmouseout”属性作为出口，并将其指向一个简单的javascript方法，该方法将更改覆盖DIV的可见性

<!-- An example of the existing tab -->
<div id="existing" onmouseover="showDiv(popUpDivId);">

<!-- An example of the popup tab, with display=None set first -->
<div id="popUpDivId onmouseout="showDiv(popUpDivId);" display="None">

<script type="text/javascript"> 
    function showDiv(popUpDivId){
        // Change the visibility. 
        $.(popUpDivId).toggle();
    }
</script>

---

如果我是从CSS中正确推断HTML，那么您可能应该将

#b

、

#d

等元素放在它们的相关

：hover

触发器中。。（并相应地更改css…）

---

这样，出现在内部元素上的鼠标悬停仍将位于外部鼠标悬停元素的内部（并且不会触发鼠标出）

如果您可以在JSFIDLE上创建一个最小的工作示例，它将非常有用。否则，请查看“请发布相关HTML”，如前所述，如果可能的话，创建一个来演示该问题。我确实使用了过渡延迟来暂停悬停足够长的时间，以使鼠标停留在悬停上，但很明显，在3秒钟过去或其他时间之后，div继续进行淡出过渡。延迟是可以的，但是在我把鼠标放到上面之后，转换需要停止，直到他们再次将鼠标移开。如果这没有多大意义，我很抱歉。我现在无法创建JSFIDLE，因为我使用的是有限的internet连接，并且网站被阻止。在您当前的javascript中，当您将鼠标移出初始div时，第二个选择将使覆盖消失。您可能希望获取元素“a”并对其应用onmouseout属性。如何将其添加到当前设置中？@user3075119将其标记为答案或upvote，

如果正确

。谢谢我使用它作为一个弹出框，当你将鼠标悬停在一个选项卡上时，会显示人员链接，在显示的div中，需要有可单击的链接。然后下一个标签是新闻等等。它在网站的标题中。我添加了第二个示例作为脚本位，没有jQuery。这将直接进入HTML文件。如果可以编辑按钮的HTML，则可以直接添加事件侦听器（onmouseover和onmouseout）。如果没有，可以添加另一个小功能来选择每个必要的按钮并添加侦听器。

var mainDiv = document.querySelector('div.main');
var hoverDiv = document.querySelector('div.hidden');

mainDiv.addEventListener('mouseover',
function() {
  hoverDiv.classList.toggle('hidden');

  var h = function() {
    this.classList.toggle('hidden');
    this.removeEventListener('mouseout',h,false);
  }

  hoverDiv.addEventListener('mouseout',h,false);
},false);

body {
    background-color: silver;
}
.main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: blue;
    box-shadow: 0px 0px 10px yellow;
}
.hidden {
    display: none;
}
.fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: black;
    z-index: 10;
    color: white;
}

var mainDiv = document.querySelector('div.main');
var hoverDiv = document.querySelector('div.hidden');

mainDiv.addEventListener('mouseover',
function() {
  hoverDiv.classList.toggle('hidden');

  var h = function() {
    this.classList.toggle('hidden');
    this.removeEventListener('mouseout',h,false);
  }

  hoverDiv.addEventListener('mouseout',h,false);
},false);

<div class="main">I'll host the hovering div</div>
<div class="hidden fade">Overlay content</div>

<!-- An example of the existing tab -->
<div id="existing" onmouseover="showDiv(popUpDivId);">

<!-- An example of the popup tab, with display=None set first -->
<div id="popUpDivId onmouseout="showDiv(popUpDivId);" display="None">

<script type="text/javascript"> 
    function showDiv(popUpDivId){
        // Change the visibility. 
        $.(popUpDivId).toggle();
    }
</script>

<script type="text/javascript"> 
    function showDiv(popUpDivId){
        // Change the visibility alternative method
        var popUp = document.getElementById(popUpDivId);

        if (popUp.display == 'None') { popUp.display = 'Block'; }
        if (popUp.display == 'Block') { popUp.display = 'None'; }
    }
</script>