今天学到了什么#

• mouseenter使用时的注意要点
• css样式覆盖
• 交集选择器

mouseenter使用时的注意要点#

mouseenter使用时的注意要点：如果事件类型是mouseenter，那就不要用e.target.tagName === ’***‘了，这是子元素被触发时的写法，而子元素被触发不会冒泡到父元素，也就是说middle的addEventListener不会执行

1
 middle.addEventListener('mouseenter', show)
2
    middle.addEventListener('mouseleave', hide)
3

4
    function show(e) {
5
        //错误写法
6
      if (e.target.tagName === 'IMG') {
7
        large.style.display = 'block'
8
      }
9
    }
10

11
    function hide(e) {
12
         //错误写法
13
      if (e.target.tagName === 'IMG') {
14
        setTimeout(function () {
15
          large.style.display = 'none'
16
        }, 200)
17
      }
18
    }

你说得很对，mouseenter 和 mouseleave 是不支持冒泡的，而 mouseover 和 mouseout 支持冒泡。

我们可以这样理解其中的区别：

1. 关于冒泡：

   • 因为 mouseenter 不支持冒泡，当你把鼠标移入 middle 盒子时，事件直接在 middle 上被触发，e.target 就直接是 middle 盒子本身，而不是里面的 img。
   • 所以原来的判断 if (e.target.tagName === 'IMG') 会失败，因为实际拿到的是 DIV。

2. 如果用 mouseover (支持冒泡)：

   • 如果你把事件改成 mouseover，当你鼠标移到 middle 里的图片上时，图片会触发 mouseover，并且这个事件会冒泡传递给父元素 middle。
   • 此时在 middle 的监听函数里，e.target 就会是 IMG，原来的 if 判断就能成立了。

总结： 既然现在用的是 mouseenter（这是推荐的，因为它避免了子元素反复触发干扰），那么事件源捕获到的就是绑定事件的容器盒子 middle，所以去掉那个 tagName === 'IMG' 的判断是完全正确的做法。

css样式覆盖#

在这个案例中，造成这种现象的原因是 CSS 的优先级规则。

在 CSS 中，当同一个元素同时拥有两个类名（例如 <span class="right error">），如果这两个类设置了相同的属性（比如 background），浏览器会优先使用 在 <style> 或 CSS 文件中定义在后面 的那个类的样式。这里和 HTML 标签里类名的先后顺序无关，也和 JS 添加类名的先后顺序无关。

（ <span class="right error">和 <span class="error right">都是一样的）

请看你的代码：

1
    .error {
2
      color: red;
3
      background: url(./images/error1.png) no-repeat left center;
4
    }
5

6
    .right { /* .right 写在了 .error 的后面 */
7
      color: green;
8
      background: url(./images/right.png) no-repeat left center;
9
    }

因为 .right 的样式定义在 .error 之后，所以如果你的标签同时有了这两个类（如 <span class="right error">），.right 的样式（绿色对号）会覆盖 .error 的样式。

解决方法：

既然是状态切换，我们不应该让它同时拥有两个状态类。在添加一个类之前，应该移除另一个类，或者直接重置 className。

交集选择器#

如果不小心在中间加了空格变成 .alert .show，在这个案例里一定不能运行，样式会失效。

这两者在 CSS 里代表完全不同的含义：

1. .alert.show（连着写，无空格）

   • 含义：交集选择器。选中同一个元素，它既要有 class="alert"，又要有 class="show"。
   • 你的代码逻辑：JS 里 myAlert.classList.add('show') 是把 show 加到了自己身上，HTML 变成了 <div class="alert show">。
   • ✅ 所以必须连着写。

2. .alert .show（中间有空格）

   • 含义：后代选择器。选中 .alert 元素内部的子元素，且子元素带有 class="show"。
   • 对应的 HTML：

     1
     <div class="alert">
     2
         <div class="show">...</div> <!-- 只有这里会生效 -->
     3
     </div>
     

   • ❌ 因为你的 show 类是加在 .alert 本身，而不是它的子元素上，所以加空格会导致选中失败，提示框弹不出来。