使用javascript使CSS悬停在元素隐藏时起作用

我有一个菜单，其中有标题和子菜单。每当用户将鼠标悬停在标题上时，就会显示子菜单

无论何时单击子菜单中的任何项目，子菜单都会使用Javascript设置为隐藏。现在，当用户将鼠标悬停在菜单上时，子菜单不会显示！请帮我把这个修好

函数closesSan（）{
document.getElementsByClassName（'submenu'）[0].style.setProperty（'display'，'none'，'important'）；
}

#主：悬停子菜单{
显示：块！重要；
}

培根
金枪鱼
鸡肉

使用可见性而不是显示

visibility: hidden;

---

保存那些小猫

使用可见性而不是显示

visibility: hidden;

---

保存这些小猫

由于您不使用纯CSS实现，请尽可能使用并避免使用：

var main=document.querySelector（'#main'）；
var子菜单=document.querySelector（“.submenu”）；
var items=document.queryselectoral（“#main li”）；
addEventListener（'mouseover'，function（）{
子菜单.style.display='block'；
});
main.addEventListener（'mouseout'，函数（）{
子菜单.style.display='none'；
});
items.forEach（功能（项目）{
item.addEventListener（'click'，函数（）{
console.log（'单击：'，项）
子菜单.style.display='none'；
});
});
。子菜单{
显示：无；
}



培根
金枪鱼
鸡


由于您不使用纯CSS实现，请尽可能使用并避免使用：


var main=document.querySelector（'#main'）；
var子菜单=document.querySelector（“.submenu”）；
var items=document.queryselectoral（“#main li”）；
addEventListener（'mouseover'，function（）{
子菜单.style.display='block'；
});
main.addEventListener（'mouseout'，函数（）{
子菜单.style.display='none'；
});
items.forEach（功能（项目）{
item.addEventListener（'click'，函数（）{
console.log（'单击：'，项）
子菜单.style.display='none'；
});
});
。子菜单{
显示：无；
}



培根
金枪鱼
鸡


您可以尝试以下简单方法：


函数closesSan（）{
document.getElementsByClassName（'submenu'）[0].classList.add（“hide”）；
setTimeout（函数（）{
document.getElementsByClassName（'submenu'）[0].classList.remove（“hide”）；
},100)
}
#main.子菜单{
显示：无；
}
#主：悬停。子菜单{
显示：块；
}
#main.submenu.hide{
显示：无；
}



培根
金枪鱼
鸡肉


您可以尝试以下简单方法：


函数closesSan（）{
document.getElementsByClassName（'submenu'）[0].classList.add（“hide”）；
setTimeout（函数（）{
document.getElementsByClassName（'submenu'）[0].classList.remove（“hide”）；
},100)
}
#main.子菜单{
显示：无；
}
#主：悬停。子菜单{
显示：块；
}
#main.submenu.hide{
显示：无；
}



培根
金枪鱼
鸡肉


我必须编写一些额外的代码以获得所需的结果。实际上，代码中的基本问题是
important
和
property
{两者工作原理相同}，从某种意义上讲，它们都按代码的优先级排列

所以为了摆脱这个问题，我在单击时添加了一个额外的类，并在每次新的悬停时删除该类。希望它能满足需要


var main=document.getElementById（“main”）；
main.onmouseover=函数（）{
document.querySelector（“.submenu”）.classList.remove（“displayNoneImp”）；
}
函数closesSan（）{
document.querySelector（“.submenu”）.classList.add（“displayNoneImp”）；
}
。子菜单{
显示：无；
}
#主：悬停。子菜单{
显示：块；
}
.displayNoneImp{
显示：无！重要；
}



培根
金枪鱼
鸡肉


我必须编写一些额外的代码以获得所需的结果。实际上，代码中的基本问题是
important
和
property
{两者工作原理相同}，从某种意义上讲，它们都按代码的优先级排列

所以为了摆脱这个问题，我在单击时添加了一个额外的类，并在每次新的悬停时删除该类。希望它能满足需要


var main=document.getElementById（“main”）；
main.onmouseover=函数（）{
document.querySelector（“.submenu”）.classList.remove（“displayNoneImp”）；
}
函数closesSan（）{
document.querySelector（“.submenu”）.classList.add（“displayNoneImp”）；
}
。子菜单{
显示：无；
}
#主：悬停。子菜单{
显示：块；
}
.displayNoneImp{
显示：无！重要；
}



培根
金枪鱼
鸡肉


每一个“重要”杀死一只小猫每一个“重要”杀死一只小猫不幸的是，子菜单仍然会占用渲染空间。如果这是您需要的，那么需要在JS中执行悬停以更改显示属性