Prefacio

Los eventos onmouseover y onmouseout son eventos de entrada y salida del mouse muy utilizados en el lado de la PC. Como su nombre indica, onmouseover es un evento que se activa al ingresar al elemento dom, y onmouseout es un evento que se activa cuando el elemento dom se activa Están incluso en baja, es decir, la versión también tiene buena compatibilidad.

Descripción

Vinculamos los eventos onmouseover y onmouseout al cuadro rojo más externo, respectivamente, e imprimimos "Enter" cuando el mouse ingresa al elemento dom, e imprimimos "Leave" al dejar el elemento dom.
Cuando el mouse ingresa al cuadro gris del elemento secundario del cuadro rojo, primero activará el evento onmouseout vinculado al cuadro rojo, y luego activará el evento onmouseover vinculado al cuadro rojo
Cuando el mouse sale del cuadro gris del elemento secundario, el evento onmouseout vinculado al cuadro rojo se activará primero y luego se activará el evento onmouseover vinculado al cuadro rojo.
En resumen, el evento vinculado al elemento principal, el mouse ingresa o sale del elemento secundario, primero activará el evento onmouseout del elemento principal y luego activará el evento onmouseover.

Aplicación práctica

En escenarios de desarrollo reales, es muy común tener una función de lista desplegable cuando el mouse se mueve a la barra de menú. Si no hay un espacio entre la lista desplegable y la categoría de producto, la implementación es muy simple
Configure el botón de categoría de producto en posición relativa, coloque la lista desplegable en la etiqueta de categoría de producto como un elemento secundario y configúrelo en posición absoluta
Finalmente, solo necesita vincular el botón de clasificación del producto para mostrar la lista desplegable cuando se activa el evento onmouseover y ocultar la lista desplegable cuando el evento onmouseout está vinculado.

Situación de brecha

Si el dibujo de diseño requiere que la lista desplegable no esté al lado del botón de clasificación del producto, pero se deja un pequeño espacio en el medio, el método anterior no se aplicará.
Cuando el mouse se mueve fuera del botón de categoría de producto, se activará el evento onmouseout para ocultar la lista desplegable.
Esto hará que el usuario mueva el mouse al botón de categoría de producto y desee hacer clic en un elemento de la lista desplegable tan pronto como la lista desplegable desaparezca cuando se mueva al espacio.

solución

En este momento, es difícil lidiar con las brechas en la vinculación de eventos de los botones de clasificación de productos. En su lugar, podemos vincular los eventos al cuadro rojo más externo, porque la brecha también está en el cuadro rojo.
La función de activación de onmouseover puede obtener el objeto de evento, y event.target es el elemento dom que se mueve actualmente con el mouse.
Al vincular el evento onmouseover al cuadro rojo más externo, se juzga en la función de activación que si el mouse ingresa al botón de categoría de producto, se mostrará la lista desplegable.
Luego vincule el evento onmouseout al cuadro rojo, y su evento.target es el elemento dom donde se encuentra el mouse cuando el cuadro rojo está a punto de ser movido fuera del último (también se activará al ingresar o salir del elemento secundario )
Luego, puede juzgar para excluir la situación de salir del botón de clasificación del producto en la función de activación de onmouseout y ocultar el cuadro desplegable directamente en otras situaciones

Código completo

<!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" />
    <title>Document</title>
    <!--jquery的cnd地址,如果失效请自行引入jquery-->
    <script src="http://code.jquery.com/jquery-1.12.4.js"
    integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
    crossorigin="anonymous"></script>
    <style>
       *{
         margin:0;
         padding:0;
         list-style: none;
       }
       .container{
        width:960px;
        margin:0px auto;
        height:100px;
        border:1px solid red;
       }
       .item{
        width: 126px;
        height: 30px;
        line-height: 30px;
        background-color: #eee;
        margin-top: 32px;
        margin-left: 40px;
        text-align: center;
        position:relative;
       }
       .drop-down{
        width: 100px;
        height: 184px;
        background: #999;
        position: absolute;
        left: 12px;
        top: 40px;
        display: none;
       }
    </style>
  </head>
  <body>
     <div class="container" id="main">
       
      <div class="item">
        产品分类
        <div class="drop-down" id="drop">
          <ul>
             <li>服务器</li>
             <li>CPU</li>
             <li>机箱</li>
             <li>硬盘</li>
             <li>SSD</li>
             <li>显卡</li>
          </ul>  
        </div> 
      </div>

     </div>
  </body>
  <script>
     
     $("#main").on("mouseover",(e)=>{
       var target = e.target;
       if($(target).hasClass("item") || $(target).parents(".item").length>0){
         $("#drop").show();
       }
     })

     $("#main").on("mouseout",(e)=>{
      var target = e.target;
      if(!$(target).hasClass("item")){
        $("#drop").hide();
      }
     })
  
  </script>
</html>

Resumen de eventos onmouseover y onmouseout