Web实现：装饰鼠标箭头实例

最新推荐文章于 2022-03-01 22:07:47 发布

jasmyn518

最新推荐文章于 2022-03-01 22:07:47 发布

阅读量461

点赞数

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

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

版权

笔记同时被 3 个专栏收录

127 篇文章 4 订阅

订阅专栏

HTML

78 篇文章 2 订阅

订阅专栏

CSS

68 篇文章 0 订阅

订阅专栏

装饰鼠标箭头实例效果图：

HTML部分代码：

<!DOCTYPE html>
<html lang="en">

<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>
        <li>家电 插线板</li>
        <li>出行 穿戴</li>
        <li>智能 路由器</li>
        <li>电源 配件</li>
        <li>健康 儿童</li>
        <li>耳机 音箱</li>
        <li>生活 箱包</li>
    </ul>
</body>

</html>

CSS部分代码：

body {
    margin: 0px;
}

ul {
    width: 234px;
    margin: 0;
    padding: 20px 0px;
    list-style: none;
    background-color: #7B8795;
    color: #ffffff;
}

ul>li {
    position: relative;
    height: 42px;
    line-height: 42px;
    padding-left: 30px;
    /* 添加小手指针 */
    cursor: pointer;
}

ul>li::after {
    content: '';
    position: absolute;
    top: 15px;
    right: 20px;
    width: 12px;
    height: 12px;
    background: url(./images/right-point.png) no-repeat center;
    background-size: contain;
}

ul>li:hover {
    background: #FD6821;
}

jasmyn518

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web实现：装饰鼠标箭头实例

装饰鼠标箭头实例效果图：HTML部分代码：<!DOCTYPE html><html lang="en"><head><script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script>
复制链接

扫一扫