1. Requisitos de ejemplo ⌛

Realice "un simple efecto de lista desplegable de visualización al pasar el mouse" similar a la página de inicio de Baidu.

2. Implementación del código ☕

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

    .dropdown-content a {
      color: black; /* 修改链接的颜色为黑色 */
      text-decoration: none; /* 去掉下拉列表链接的下划线 */
    }

    .dropdown{
      position: relative;
      display:inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 90px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);/* 添加阴影 */
      cursor: pointer; /* 设置鼠标悬停样式为手型 */
      padding: 5px 10px;
      border-radius: 5px; /* border-radius 属性被用于创建圆角*/
    }
    .dropdown:hover.dropdown-content {
      display:block;
    }
    .dropdown span:hover {
      color: red; /* 当鼠标悬停时，将文本颜色更改为红色 */
    }
    .dropdown-content a:hover {
      color: deepskyblue; /* 当鼠标悬停时，将链接文本颜色更改为蓝色 */
    }
  </style>
</head>
<body>

<div class= "dropdown">
      <span>
        鼠标移动到这里，会出现下拉列表
      </span>
  <div class="dropdown-content">
    <a href="https://www.baidu.com">表单-1<br></a>
    <a href="https://www.jd.com">表单-2<br></a>
    <a href="https://www.taobao.com">表单-3<br></a>
    <a href="https://www.souhu.com">表单-4<br></a>
    <a href="https://www.sougou.com">表单-5</a>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    let dropdown = document.querySelector('.dropdown');
    dropdown.addEventListener('mouseover', function() {
      let dropdownContent = this.querySelector('.dropdown-content');
      dropdownContent.style.display = 'block';
    });
    dropdown.addEventListener('mouseout', function() {
      let dropdownContent = this.querySelector('.dropdown-content');
      dropdownContent.style.display = 'none';
    });
  });
</script>
</body>
</html>

Análisis de la idea y explicación del código:

esta etiqueta

<div class="dropdown">

Es un contenedor que envuelve la lista desplegable. Utiliza las propiedades position:relative; y display:inline-block; en CSS para controlar su posición y visualización en la página.

Cuando el mouse se desplaza sobre el contenedor .dropdown, a través de la regla .dropdown:hover .dropdown-content del selector de CSS, la lista desplegable se configura para mostrar (display: block;) El elemento se mostrará como un elemento a nivel de bloque. DOMContentLoadedEl evento se activa cuando se carga el contenido de la página . En la función de devolución de llamada de este evento, se ejecutará el siguiente código:

let dropdown = document.querySelector('.dropdown');

Esta línea de código usa document.querySelectorel método para seleccionar el primer .dropdownelemento con la clase en la página y asignarlo a la variable dropdown.

dropdown.addEventListener('mouseover', function() { 
let dropdownContent = this.querySelector('.dropdown-content'); 
dropdownContent.style.display = 'block'; });

Cuando el mouse se mueve sobre .dropdownel elemento, mouseoverse activa el evento y luego se ejecuta la función de devolución de llamada. En la función de devolución de llamada, thisapunte al elemento que desencadena el evento en sí (es decir, .dropdownel elemento), this.querySelector('.dropdown-content')busque el elemento con la clase dentro del elemento a través de .dropdown-contenty asígnelo a la variable dropdownContent. Luego configure la propiedad dropdownContentde estilo para que sea visible.display'block'

dropdown.addEventListener('mouseout', function() { 
let dropdownContent = this.querySelector('.dropdown-content'); 
dropdownContent.style.display = 'none'; });

Cuando el mouse se mueve fuera del .dropdownelemento, mouseoutse activa el evento y se ejecuta la función de devolución de llamada. La lógica en la función de devolución de llamada es similar a la anterior, encontrando this.querySelector('.dropdown-content')el elemento .dropdowndentro del elemento .dropdown-contenty asignándolo a una variable dropdownContent. Luego, establezca la propiedad dropdownContentde estilo en , haciéndola oculta.display'none'

En resumen:

El código en la parte de JavaScript escucha el evento DOMContentLoaded de la página para garantizar que el código se ejecute después de cargar el documento. Una vez que la página se ha cargado, encuentra el elemento .dropdown y le agrega dos detectores de eventos. El primer detector de eventos es mouseover, que se activa cuando el puntero del mouse ingresa al área .dropdown. Encontrará el elemento .dropdown-content dentro del elemento .dropdown y lo mostrará (cambiando su visualización de propiedades CSS a 'bloquear'). El segundo detector de eventos es mouseout, que se activa cuando el puntero del mouse sale del área .dropdown. También encontrará el elemento .dropdown-content dentro del elemento .dropdown y lo ocultará (cambiando su visualización de propiedades CSS a 'ninguno'). De esta forma, cuando el mouse se mueva fuera del área desplegable, la lista desplegable desaparecerá.

JavaWeb (9): caso completo de front-end 3 (lista desplegable de visualización flotante)

1. Requisitos de ejemplo ⌛

2. Implementación del código ☕

Supongo que te gusta