Web实现：伪类事件伪类鼠标悬停效果

最新推荐文章于 2024-04-23 16:55:33 发布

jasmyn518

最新推荐文章于 2024-04-23 16:55:33 发布

阅读量1.8k

点赞数

分类专栏：笔记 HTML CSS 文章标签：前端 html css

本文链接：https://blog.csdn.net/jasmyn518/article/details/122647112

版权

笔记同时被 3 个专栏收录

127 篇文章 3 订阅

订阅专栏

HTML

78 篇文章 2 订阅

订阅专栏

CSS

68 篇文章 0 订阅

订阅专栏

伪类实现的鼠标悬停效果，直接上代码：
HTML部分：

<!DOCTYPE html>
<html>
<head>
<!--系统内置 start-->
<script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script>
<!--系统内置 end-->
    <meta charset="utf-8">
    <title>案例</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <ul>
        <li>首页</li>
        <li>学院</li>
        <li>报名</li>
    </ul>
</body>
</html>

CSS部分代码：

ul,
li {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

ul {
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    overflow: hidden;
    display: inline-block;
}

ul::after {
    content: '';
    display: block;
    clear: both;
}

ul>li {
    float: left;
    line-height: 60px;
    padding: 0 15px;
}

ul>li:hover {
    background: #0091ff;
    color: #FFFFFF;
}
ul>li:active{
  color:black;
}                       /*hover一定要在active之前，否则不会生效*/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jasmyn518

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web实现：伪类事件伪类鼠标悬停效果

伪类实现的鼠标悬停效果，直接上代码：HTML部分：<!DOCTYPE html><html><head><script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script> <meta
复制链接

扫一扫