我有一些元素,悬停时会切换子 ul 的显示(无/ block )。不幸的是,我无法通过带显示的 CSS 过渡淡入淡出。使用不透明度也不起作用,因为悬停区域扩展到不透明度:0 ul,并且两者的组合(过渡不透明度,但仍然切换显示)似乎不起作用。
有没有办法通过 Javascript 拦截显示变化,并让它在 block 和无之间淡出?是否有其他建议(我也尝试了 height: 0/auto toggle ,但不正确)?我更喜欢拦截方法而不是纯 JS 方法,以防 JS 被禁用或其他原因。
最佳答案
如果我没理解错的话。假设是这样的:<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');
});
关于javascript - 悬停时拦截显示变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9205863/