鼠标悬停下拉菜单
虽然博客上曾经写过CSS下拉菜单，但当时就没有搞懂，只是纯做笔记而已。这次也不好说真的懂了没，只是W3Schools的How to系列实在太好了，忍不住为其疯狂打call！总之好记性不如烂笔头，多总结一遍也能记得多一些。
HTML
<div class="drop-menu">
<div class="hover-btn">Hover me</div>
<div class="drop-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
一个hover用的对象（hover-btn），一个hover后显示的菜单（drop-content），最后把它俩包裹起来（drop-menu）。
CSS
.drop-menu {
position: relative; /* 使菜单跟hover对象保持相对位置 */
display: inline-block; /* 使菜单形成自然宽度而不会撑满屏幕 */
/* 其他的关于整体的样式控制 */
}
.hover-btn {
cursor: pointer; /* hover时鼠标的变化提示 */
/* 其他的关于hover对象的样式控制 */
}
.drop-content {
display: none; /* 默认不显示菜单 */
position: absolute; /* 跟hover对象的relative对应 */
z-index: 1; /* 保证菜单在最上层，不被其他元素覆盖 */
/* 其他的关于下拉菜单的样式控制 */
}
/* 以下开始利用hover选择器实现鼠标悬停时显示下拉菜单 */
.drop-menu:hover .drop-content {
display: block; /* 悬停时变为显示 */
}
.drop-menu:hover .hover-btn {
/* 悬停时hover对象的样式控制 */
}
DEMO
加效果
CSS3有很多动画效果，其中我特别爱用transitions，它可以让变化更顺滑。可是display: none和display: block的组合无法使用transitions，所以如果要在上述菜单的显示上添加效果，得用visibility配合opacity来控制菜单的隐藏和显示。
.drop-content {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
.drop-menu:hover .drop-content {
visibility: visible;
opacity: 1;
}
/* 顺便给hover对象也加个效果 */
.hover-btn {
transition: 0.5s;
}
两个神奇的问题
- Bitcron×iPhone 7：首页无法点开Hover me按钮，文章内页可以；
- Bitcron×iPhone 7：点开Hover me按钮后无法靠点击页面其他地方而收回菜单。