css实现鼠标选中文字后改变背景色

weixin_50260818

于 2022-06-23 15:23:49 发布

阅读量1.4k

点赞数

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/weixin_50260818/article/details/125427449

版权

css鼠标选中文字后改变背景色可以使用::selection选择器。

::selection选择器匹配元素中被用户选中或处于高亮状态的部分。::selection只可以应用于少数的CSS属性：color、background、cursor和outline。

!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            p {

                border: 1px solid red;

            }


            .color::-moz-selection {

                background: #93c;

                color: #fcf;

            }

            .color::selection {

                background: #93c;

                color: #fcf;

            }

        </style>
    </head>

    <body>

        <p>默认文本。测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</p>

        <p class="color">鼠标选中文字后改变背景色。测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</p>

    </body>

</html>