600字
最近开始和朋友写一个代购的前端页面样式,目前还只是针对于PC端的web界面。有一个需求是:当鼠标移入导航栏的某一个元素时,弹出一个下拉菜单。
在看过几篇度娘的攻略之后,暂定实现原理为:将下拉菜单CSS的display属性默认为none。这样整个下拉菜单就处于隐藏状态。然后在鼠标移入目标元素时,就是触发hover属性时,将下拉菜单的display属性更改为block,这样就完成了整个效果。
但是在实际编写的时候小玉发现(现象):如果采用CSS编写,这个下拉菜单必须要是目标元素的子元素才有效果。
哎呀妈呀,写完这段话才发现,这个现象是因为选择器的写法原因造成的的,真是尴尬
#a:hover #b{
display: block;
}
/* 这个选择器的意思是 a 鼠标移入下的 b ,那当然 b 得是 a 的子元素才能找得到 b */
要达到同样的效果,还有两种JS的写法:
2.这个是用到 Jquery 的方法
到这里,效果是实现了,但是还有一个疑问:如果下拉菜单不是目标元素的子元素,能实现这个效果吗?于是,小玉试了一下,如果不采用JS的话,emmm 小玉都不知道要怎么写style……
如果采用JS的话,会出现一个新的问题(现象):就是当鼠标移入 a 的时候,确实可以弹出 b ,但是,当尝试把鼠标接着移入 b 的时候,b 就消失了。究其原因是因为:b 如果不是 a 的子元素,那么将鼠标从 a 移入 b 的时候,鼠标会脱离 a 元素的区域,导致 b 从新回到隐藏状态。这肯定不是我们想要的效果。
所以当前看来的结论是:如果要实现一个隐藏的下拉菜单,那么这个菜单最好是触发元素的子元素。
最后推荐一下我的个人公众号,里面都记录一些我在日常学习工作生活中遇到的各种小问题