Question

我有div，当你将鼠标悬停在它上面时，另一个显示在它的位置。

但是，当mouseout div时，其他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>

Answer 1

创建CSS类后，说.fade（转换的CSS代码等），顺便说一句

.hidden {
    display: none;
}

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

JavaScript代码 -

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);

修改

http://jsfiddle.net/XDgmD/2/

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>

Answer 2

您能描述一下您打算如何在论坛中加入/使用它吗？我认为，如果你可以嵌入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>

我在这里使用jQuery，toggle() method。我不确定你能打电话的全部和哪些地方。如果您不能使用jQuery，而是想要使用更长的document.getElementById(popUpDivId)，那么更改属性：

<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>

Answer 3

如果我正在从您的CSS中正确推断HTML，那么您应该将#b，#d等元素放在相关的:hover触发器中。（并更改css相应.. ）

这样，出现在内部元素上的悬停仍然在外部悬停元素内部（，它不会触发mouseout ）..

悬停div mouseout的超时/淡出延迟？

3 个答案: