鼠标放在导航的文字上也会消失,是因为碰到了dl元素吗,怎么样可以碰到字也不会消失,用z-index的话 导航的链接是不是就点不到了
来源:2-7 实现垂直菜单
weixin_慕村1291783
2020-11-16 17:06:28
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码,切记添加代码注释(请勿截图)
(function() {
var ul = document.getElementById('banner-nav-ul');
var lis = ul.children;
// console.log(lis);
var meaus = ul.nextElementSibling.children;
// console.log(meaus);
ul.onmouseover = function(e) {
if (e.target.tagName.toLowerCase() == 'li') {
for (var i = 0; i < meaus.length; i++) {
var a = meaus[i].getAttribute('data-t');
if (e.target.getAttribute('data-t') == a) {
meaus[i].className = 'menu current';
} else {
meaus[i].className = 'menu';
}
}
}
// console.log(e.target.getAttribute('data-t'));
}
ul.onmouseout = function() {
for (var i = 0; i < meaus.length; i++) {
meaus[i].className = 'menu';
}
}
})();
1回答
同学你好,onmouseout也支持事件冒泡,即鼠标移入ul内的任一子元素,都会触发该事件。所以鼠标移入文字所在的em标签也会让列表消失。建议将事件换成onmouseleave,该事件不支持事件冒泡,只有鼠标移出ul时才能触发该事件,如下:
祝学习愉快!
相似问题