请问为什么鼠标移入li时未增加current类名，鼠标移出li后才类名才改变为current？

来源：2-8 项目作业

wowawawoa

2021-06-11 13:49:55

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
            color: black;
        }
        ul {
            list-style: none;
        }
        header {
            width: 1000px;
            height: 50px;
            margin: 50px auto;
        }
        header .logo {
            font-size: 15px;
            line-height: 50px;
            float: left;
        }
        header .nav {
            width: 360px;
            height: 50px;
            float: left;
            padding-left: 420px;
            position: relative;
        }
        header .nav .nav-ul .current a{
            color: #f01400;
        }
        header .nav .underline {
            position: absolute;
            background-color: #f01400;
            bottom: 0;
            left: 420px;
            width: 32px;
            height: 5px;
            border-radius: 2px;
            transition: left .5s ease 0s;
        }
        header .nav ul li {
            float: left;
            margin-right: 40px;
            text-align: center;
            line-height: 50px;
        } 
        header .buy {
            float: left;
            height: 50px;
            width: 100px;
            text-align: center;
            line-height: 50px;
            background-color: black;
            border-radius: 10px;
        }
        header .buy a {
            color: white;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">
            <h1><a href="">慕课手机</a></h1>
        </div>
        <div class="nav">
            <ul class="nav-ul" id="nav-ul">
                <li data-n="0" class="box current"><a data-n="0" href="">首页</a></li>
                <li data-n="1" class="box"><a data-n="1"  href="">外观</a></li>
                <li data-n="2" class="box"><a data-n="2" href="">配置</a></li>
                <li data-n="3" class="box"><a data-n="3" href="">型号</a></li>
                <li data-n="4" class="box"><a data-n="4" href="">说明</a></li>
            </ul>
            <div class="underline" id="underline"></div>
        </div>
        <div class="buy">
            <a href="">立即购买</a>
        </div>
    </header>

    <script>
        var navUl = document.getElementById('nav-ul');
        var underline = document.getElementById('underline');
        var menuLis = document.querySelectorAll('.nav-ul li');

        navUl.onmouseover = function (e) {
            if (e.target.tagName.toLowerCase() == 'li') {
                for(var i = 0; i < menuLis.length; i++) {
                    menuLis[i].className = 'box';
                }
                e.target.className = 'box current';
            }
            var n = e.target.getAttribute('data-n');
            underline.style.left = 420 + 72 * n + 'px';
        }
    </script>
</body>
</html>

写回答

1回答

好帮手慕然然

2021-06-11

已采纳

同学你好，原因如下：

HTML代码中，因为导航项li标签中存在a标签，当鼠标移入a标签区域时，此时鼠标也是在li标签区域，但是不满足判断条件e.target.tagName.toLowerCase() == 'li'，所以不会执行添加current类名代码（e.target.className = 'box current';），当鼠标移开时，其实是由a标签区域进入了li标签区域，此时满足判断条件，所以添加上了current类名，如图