1. Example requirements ⌛

Realize "a simple mouse-over display drop-down list effect" similar to Baidu's homepage.

2. Code implementation ☕

<!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>

Idea analysis and code explanation:

this label

<div class="dropdown">

Is a container that wraps the drop-down list. It uses the position: relative; and display: inline-block; properties in CSS to control its position and display on the page.

When the mouse hovers over the .dropdown container, through the CSS selector .dropdown:hover .dropdown-content rule, the dropdown list is set to display (display: block;) The element will be displayed as a block-level element. DOMContentLoadedThe event is fired when the page content is loaded . In the callback function of this event, the following code will be executed:

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

This line of code uses document.querySelectorthe method to select the first .dropdownelement with the class on the page and assign it to the variable dropdown.

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

When the mouse moves over .dropdownthe element, mouseoverthe event is fired, and then the callback function is executed. In the callback function thispoint to the element that triggers the event itself (that is, .dropdownthe element), this.querySelector('.dropdown-content')find the element with the class inside the element through .dropdown-content, and assign it to the variable dropdownContent. Then set the dropdownContent's style property to make it visible.display'block'

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

When the mouse moves out of .dropdownthe element, mouseoutthe event is fired and the callback function is executed. The logic in the callback function is similar to the above, by this.querySelector('.dropdown-content')finding the element .dropdowninside the element .dropdown-contentand assigning it to a variable dropdownContent. Then, set dropdownContentthe 's displaystyle property to 'none', making it hidden.

To sum it up:

The code in the JavaScript part listens to the DOMContentLoaded event of the page to ensure that the code is executed after the document is loaded. Once the page has loaded, it finds the .dropdown element and adds two event listeners to it. The first event listener is mouseover, which fires when the mouse pointer enters the .dropdown area. It will find the .dropdown-content element inside the .dropdown element and display it (by changing its CSS property display to 'block'). The second event listener is mouseout, which fires when the mouse pointer leaves the .dropdown area. It will also find the .dropdown-content element inside the .dropdown element and hide it (by changing its CSS property display to 'none'). This way when the mouse moves out of the .dropdown area, the dropdown list will disappear.

JavaWeb (9) - front-end comprehensive case 3 (hover display drop-down list)

1. Example requirements ⌛

2. Code implementation ☕

Guess you like