悬停时拦截显示更改
Intercept display change on hover?
我有一些元素,悬停时会切换子ul的显示(none/block)。不幸的是,我无法通过带有显示的CSS转换淡入淡出。使用不透明度也不起作用,因为悬停区域扩展到不透明度:0 ul,并且两者的组合(过渡不透明度,但仍切换显示)似乎不起作用。
有没有一种方法可以通过Javascript拦截显示更改,并使其在块和无之间衰减?是否有其他建议(我也尝试了高度:0/自动切换,但效果不佳)?我更喜欢intercept方法而不是纯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');
});
相关文章:
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 有问题的突出显示(悬停)一个系列,突出显示图表
- 下拉显示悬停选项
- 图表JS未显示悬停时的小数据
- 传单显示悬停时的地图 - 地图加载不正确
- 如何使用 Javascript 将鼠标悬停在元素上显示悬停
- 使链接保持活动状态,使用 JavaScript 在单击时显示悬停效果
- Jquery 隐藏/显示 悬停时反复发生
- 仅高亮显示悬停的可丢弃项或放置到的项目
- chartjs显示悬停在折线图上的点
- 如何在Javascript中显示悬停类
- 如何在网站的samrtphone中显示悬停帮助
- Don't在触摸设备上显示悬停状态
- 在ace中显示悬停光标的工具提示
- 显示悬停图像
- 事件,用于突出显示悬停元素
- 如何在基本面上突出显示悬停时的gmap标记
- 防止超链接的触摸和显示悬停状态
- 是否有一种方法来显示悬停/工具提示信息,当我鼠标在spotfire可视化标题
- 在没有javascript的情况下显示悬停子菜单