javascript - 悬停时拦截显示变化？

Question

我有一些元素，悬停时会切换子 ul 的显示(无/ block )。不幸的是，我无法通过带显示的 CSS 过渡淡入淡出。使用不透明度也不起作用，因为悬停区域扩展到不透明度:0 ul，并且两者的组合(过渡不透明度，但仍然切换显示)似乎不起作用。

有没有办法通过 Javascript 拦截显示变化，并让它在 block 和无之间淡出？是否有其他建议(我也尝试了 height: 0/auto toggle ，但不正确)？我更喜欢拦截方法而不是纯 JS 方法，以防 JS 被禁用或其他原因。

Answer 1

如果我没理解错的话。假设是这样的:<div class="nav-container"><ul></ul></div> .

您可以在父项上监听悬停，因为它包含子项:

var parent      = document.getElementsByClassName('nav-container')[0];
var connect     = function (element, event, callback) {/* I think you */};
var disconnect  = function (handle) {                  /* can find */};
var addClass = function (element, className) {      /* these elsewhere. */};
var removeClass = function (element, className) {      /* ... */};
var hoverHandle = connect(parent, 'hover', function (event) {
    addClass(parent, 'hovered');
    if (blurHandle) {
        disconnect(blurHandle);
    }
});
var blurHandle = = connect(parent, 'blur', function (event) {
    removeClass(parent, 'hovered');
    if (hoverHandle) {
        disconnect(hoverHandle);
    }
});  

然后在 CSS 中:

.nav-container > ul {
    display: none;
    /* do fade out */
} 
.nav-container.hovered > ul {
    display: block;
    /* do fade in */
}

如果您使用的是 jQuery 1.7，那么这将变为:

var navContainers = $('.nav-container');
navContainers.on('hover', function () {
     $(this).toggleClass('hovered');
});
navContainers.on('blur', function () {
    $(this).toggleClass('hovered');
});