使用Javascript在mouseenter事件移除类失效，求原因分析

嘿，我帮你找出代码里的问题啦！你的alert能正常触发说明事件绑定没问题，问题出在两个语法细节上：

• 错误1：获取container元素时选择器写错了
  你写的document.querySelector('container')没有加类选择器的.，因为container是元素的class属性值，正确的选择器应该是.container，所以这行代码应该改成：

  var container = document.querySelector('.container');
  

• 错误2：移除类名时多写了.
  使用classList.remove()方法时，参数只需要写类名本身，不需要加.，你写的.left-filter是CSS选择器格式，不是类名，所以这行要改成：

  container.classList.remove('left-filter');
  

修正后的完整代码： #

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <link rel="stylesheet" type="text/css" href="styles.css" /> 
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
    <title>Document</title> 
</head> 
<body> 
    <div class="container"> 
        <div class="left-filter"> 
            <div class="left"> 
                <h1 class="heading1">hi</h1> 
                <a href="" class="landing-btn">Shop</a> 
            </div> 
        </div> 
    </div> 
    <script> 
        var left = document.querySelector('.left'); 
        var container = document.querySelector('.container'); 
        left.addEventListener('mouseenter', function(){ 
            container.classList.remove('left-filter'); 
        }) 
    </script> 
</body> 
</html>

简单总结一下：CSS选择器（比如用在querySelector里）需要用.来标识类名，但classList的方法直接操作的是类名本身，不需要带.，刚学JS的时候很容易搞混这一点，以后注意就好啦！

内容的提问来源于stack exchange，提问作者Blue