导航栏Tab内容 hover延迟出现（CSS）

最新推荐文章于 2025-02-22 21:33:38 发布

facesix

最新推荐文章于 2025-02-22 21:33:38 发布

阅读量6k

点赞数 3

分类专栏： html/css 文章标签： css 导航鼠标

本文链接：https://blog.youkuaiyun.com/facesix/article/details/77836147

版权

本文介绍如何利用CSS实现导航栏菜单在鼠标悬停时，内容延迟出现的效果。通过结合visibility:hidden/visible和opacity:0/1，避免使用display属性，以确保平滑过渡。这种方法提高了用户体验，避免了内容瞬间显示和消失的问题。示例代码展示了如何将隐藏内容作为Tab的子元素，以实现更好的语义化和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导航栏的菜单TAB在鼠标hover的时候会在下方出现隐藏的内容是很多网站很常见的一种样式。
大家很容易想到的是在每个TAB下让各自单元的内容用dispaly:none，先隐藏起来，然后再在：hover选择器中写display:bock样式让其显现出来。可是直接display:block的话隐藏内容瞬间显示，鼠标移开瞬间消失，这样的体验是很不好的。
然后我们又很快想到利用transition来设置过渡，但是当我们设置这个属性的时候发现display：block是不起作用的，瞬间消失瞬间出来并未得到延迟。这是因为transition属性并不支持display:block属性的设置。由此我们如果要利用css来实现的话，我们需要换一种方式来设置。
这里我们使用visibility:hidden/visible && opacity:0/1 来实现，在这里可能有个疑问说为什么要用这两个结合，而不是只用一个就可以了。因为单单用visibility的话，就只是相当于延迟了出现的时间，而没有一种透明渐变的效果，所以要加opacity来结合。那为什么不直接用opacity就可以了呢？因为只用opacity的话在鼠标移开tab的时候，隐藏的内容会变，所以要让隐藏内容一直出现。
我现在只总结一种html的写法，一种思路而已，还有其他很多种办法，大家可以自己去摸索。
首先是html的写法，我选择这种写法的原因是语义化比较好，让隐藏的内容成为其Tab的子元素，这样以后在修改的时候会比较一目了然。（这里由于篇幅太长，只列出一个tab的代码）

 <nav class="nav_menu">
            <div class="nav_menu_wrapper">
                <ul class="flex nav_menu_ul">
                    <li class="flex_item">
                        <a href="http://www.roseonly.com.cn/list/qixi.html" class="menu_item nav_menu_qx" style=";background:#c71f2c">七夕礼物</a>
                    </li>
                    <li class="flex_item more_item">
                        <a href="http://www.roseonly.com.cn/list/lipinzhenxuan.html" class="menu_item more_item_a">爱礼推荐</a>
                        <div class="menu_hidden">
                            <div class="flex menu_hidden_wrapper">