鼠标交互案例-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43695167/article/details/122670710

一、鼠标点击选中，再点取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <title>Document</title>
    <style>
    .box{
        width: 34px;
        height: 34px;
        border: 2px solid rgba(200, 200, 202, 1);
        border-radius: 50%;
        background-color: transparent;
}
    .box:hover{
        cursor: pointer;
}
    .box0{
        width: 34px;
        height: 34px;
        border: 2px solid rgba(200, 200, 202, 1);
        border-radius: 50%;
        background-color: rgba(200, 200, 202, 1);;
}
    </style>
    <script>
	    $(function(){
    $(".box").toggle(function(){
	    $(this).addClass("box0");
    },function(){
	    $(this).removeClass("box0");
    });
});
    </script>
</head>
<body>
    <div class="box"></div>
</body>
</html>

二、鼠标点击变换内容，再点变回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #word{
    color: rgba(251, 69, 4, 1);
    font-size: 46px;
    font-family: PingFangSC-Medium;
}
    </style>
</head>
<body>
    <button data-text="0" id="btn">
    <span id="word">299</span></button>
</body>
</html>
<script>
    var word = document.getElementById('word');
    document.getElementById('btn').onclick = function () {
	    var text = this.getAttribute('data-text');
	    this.setAttribute('data-text',word.innerHTML);
    	word.innerHTML = text;
    }
</script>