使用 CSS 模拟鼠标点击交互

最新推荐文章于 2022-12-14 18:43:40 发布

weixin_46370867

最新推荐文章于 2022-12-14 18:43:40 发布

阅读量674

点赞数 1

分类专栏： CSS html

本文链接：https://blog.csdn.net/weixin_46370867/article/details/108289280

版权

html 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

使用 CSS 模拟鼠标点击交互

通过 CSS 方式模拟鼠标点击交互动效的两个核心要素：

HTML 元素需要使用 <input> 和 <label> 元素
CSS 使用 :checked 伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS实现点击交互</title>
    <style>
        input {
            display: none;
        }

        input:checked + label {
            background-color: yellow ;
        }
    </style>
</head>
<body>
    <input type="radio" id="1">
    <label for="1">点我</label>
    <!-- 当用户点击的时候，添加黄色的背景色 -->
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_46370867

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
使用 CSS 模拟鼠标点击交互

使用 CSS 模拟鼠标点击交互通过 CSS 方式模拟鼠标点击交互动效的两个核心要素：HTML 元素需要使用 <input> 和 <label> 元素CSS 使用 :checked 伪类选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
复制链接

扫一扫