css 中display ：none隐藏元素，鼠标悬浮时设置display:block 元素不显示

如果您希望在鼠标悬停时显示元素，可以使用CSS中的:hover伪类和display属性实现。下面是一个示例代码：

<div class="box">
  <p>这是一段文本。</p>
</div>

.box {
  display: none;
}

.box:hover {
  display: block;
}

在上面的示例中，初始时，`.box`元素的display属性值为none，因此该元素不会显示出来。但是，当鼠标悬停在该元素上时，会应用:hover伪类的样式，将display属性值设置为block，从而显示该元素。

需要注意的是，如果使用display:none隐藏元素，那么该元素的空间也会被占据，不会影响其他元素的位置。但是，如果通过设置visibility:hidden来隐藏元素，则该元素的空间仍然会保留，可能会影响布局。

相关问题

css 设置元素隐藏，鼠标悬浮时显示

你可以使用 CSS 中的 `display` 属性和 `:hover` 伪类来实现元素隐藏和鼠标悬浮时显示的效果。具体做法如下：

1. 首先将元素的 `display` 属性设置为 `none`，这样元素会被隐藏起来。

2. 然后使用 `:hover` 伪类来监听鼠标悬浮事件，并将元素的 `display` 属性设置为 `block` 或者 `inline`，这样元素就会在鼠标悬浮时显示出来。

下面是一个示例代码：

<div class="box">这是一个隐藏的元素</div>

.box {
  display: none;
}

.box:hover {
  display: block;
}

在上面的代码中，元素 `.box` 的初始状态为隐藏，当鼠标悬浮在该元素上时，它的 `display` 属性会变为 `block`，从而显示出来。你也可以将 `display` 属性设置为 `inline` 或者其他值，具体取决于你的需求。