使用 JavaScript 在悬停时显示一个“隐藏”的 Div

使用 JavaScript 在悬停时显示隐藏的 Div

Show a `hidden` Div on Hover using JavaScript

要在悬停时显示隐藏的 div 元素：

向元素添加mouseover事件侦听器。
每次悬停元素时，将display属性设置div为
block。
如果您使用该visibility属性隐藏div，请将其设置visibility
为visible。

以下是本文示例的 HTML。

索引.html


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

    <style>
      #container {
        background-color: lime;
        width: 150px;
        height: 150px;
      }

      #hidden-div {
        display: none;
        background-color: salmon;
        color: white;
      }
    </style>
  </head>

  <body>
    <div id="container">
      Container content
      <div id="hidden-div">Hidden div content</div>
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js


const el = document.getElementById('container');

const hiddenDiv = document.getElementById('hidden-div');

// ✅ Show hidden DIV on hover
el.addEventListener('mouseover', function handleMouseOver() {
  hiddenDiv.style.display = 'block';

  // 👇️ if you used visibility property to hide div
  // hiddenDiv.style.visibility = 'visible';
});

// ✅ (optionally) Hide DIV on mouse out
el.addEventListener('mouseout', function handleMouseOut() {
  hiddenDiv.style.display = 'none';

  // 👇️ if you used visibility property to hide div
  // hiddenDiv.style.visibility = 'hidden';
});

在悬停时显示隐藏的 div

我们向元素添加了一个
鼠标悬停
事件侦听器。

每次悬停元素时，handleMouseOver都会调用该函数。

我们使用display
属性来显示隐藏的div元素。但是，如果您最初使用可见性
属性来隐藏div元素，则可能需要使用它
。

当元素的display属性设置为时none，该元素将从 DOM 中移除并且对布局没有影响。文档呈现为好像该元素不存在一样。

另一方面，当元素的可见性属性设置为隐藏时，它仍会占用页面空间，但是该元素是不可见的（未绘制）。

该元素仍会照常影响您页面上的布局。

我们还添加了一个
mouseout
事件侦听器。每次用户将光标移出该元素时，该
div元素就会再次隐藏。

根据您的用例，您可能不需要此功能。

如果要避免在隐藏或显示元素时页面内容发生变化的累积布局偏移 (CLS)，则应使用CSS 属性而不是. visibilitydisplay

下面是一个使用该visibility属性的示例。

索引.html


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

    <style>
      #container {
        background-color: lime;
        width: 150px;
        height: 150px;
      }

      #hidden-div {
        visibility: hidden;
        background-color: salmon;
        color: white;
      }
    </style>
  </head>

  <body>
    <div id="container">
      <div>Container content</div>
      <div id="hidden-div">Hidden div content</div>
      <div>More content</div>
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js


const el = document.getElementById('container');

const hiddenDiv = document.getElementById('hidden-div');

// ✅ Show hidden DIV on hover
el.addEventListener('mouseover', function handleMouseOver() {
  hiddenDiv.style.visibility = 'visible';
});

// ✅ (optionally) Hide DIV on mouse out
el.addEventListener('mouseout', function handleMouseOut() {
  // 👇️ if you used visibility property to hide div
  hiddenDiv.style.visibility = 'hidden';
});

在悬停可见性属性上显示隐藏的 div

即使div页面上隐藏后有内容，但它下面的元素并没有取代它，因为这次我们使用visibility
属性隐藏了元素。

换句话说，即使元素没有被渲染，它仍然会正常影响页面的布局。

–