JS鼠标经过时改变div里面的内容

发布网友发布时间：2022-04-30 09:53

共1个回答

热心网友时间：2022-06-20 19:12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>T</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .main{
            width: 470px;
            margin: 20px auto;
        }
        ul li{
            float: left;
            width: 214px;
            height: 58px;
            list-style: none;
            border: 1px solid #D0D0D0;
            border-bottom: none;
            background-color: #fff;
            border-radius: 15px 15px 0 0;
            font: 19px/58px "microsoft yahei";
            text-align: center;
            cursor: pointer;
        }

        #tab1{
            margin-right: 38px;
            background-color: #0AA7EC;
        }
        .content{
            float: left;
            height: 392px;
            width: 468px;
            text-align: center;
            border: 1px solid #D0D0D0;
        }
        .circle_out{
            display: inline-block;
            width: 212px;
            height: 212px;
            border: 1px solid #C4C4C4;
            border-radius: 50%;
            margin-top: 105px;
        }
        #circle_inner{
            display: inline-block;
            width: 192px;
            height: 192px;
            border-radius: 50%;
            background-color: rgb(10,167,236);
            margin-top: 10px;
        }
    </style>
    <script>
        window.onload = function () {
            var tab1 = document.getElementById("tab1");
            var tab2 = document.getElementById("tab2");
            var circle = document.getElementById("circle_inner");
            tab1.onmouseover = function () {
                tab1.style.backgroundColor="#0AA7EC";
                tab2.style.backgroundColor="#FFFFFF";
                circle.style.backgroundColor="rgb(10,167,236)";
            }
            tab2.onmouseover = function () {
                tab1.style.backgroundColor="#FFFFFF";
                tab2.style.backgroundColor="#0AA7EC";
                circle.style.backgroundColor="rgb(190,177,246)";
            }
        }
    </script>
</head>
<body>
<div class="main">
    <ul>
        <li id="tab1">1</li>
        <li id="tab2">2</li>
    </ul>
    <div class="content">
            <span class="circle_out">
                <span id="circle_inner"></span>
            </span>
    </div>
</div>
</body>
</html>

把颜色换成你想要的图片即可。