CSS:结合clip-path实现目录的隐藏显示以及提示框的隐藏显示
发布日期:2021-06-30 15:46:28 浏览次数:2 分类:技术文章

本文共 975 字,大约阅读时间需要 3 分钟。

目录的隐藏与显示

在这里插入图片描述

鼠标悬停在目录上后
在这里插入图片描述
或者
在这里插入图片描述

代码

    
Title

隐藏目录方式

.nav:hover{
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0); } .nav:hover .nav-list{
color:#DCF5FF; } .nav .nav-list{
display: inline-block; height: 50px; line-height: 50px; padding: 0 5px; font-size: 30px; font-weight: bolder; color: #00B6FF; transition: all 0.5s ease-in-out; }

提示框

在这里插入图片描述

鼠标悬停后
在这里插入图片描述

    
Title
i

Alert

This is a secret!

转载地址:https://kaisarh.blog.csdn.net/article/details/105989525 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:CSS:实现跳动小球蒙版效果
下一篇:JavaScript:时间戳(timestamp)与时间(Date)转换

发表评论

最新留言

做的很好,不错不错
[***.243.131.199]2024年04月10日 12时19分02秒