CSS鼠標怎么顯示隱藏的內(nèi)容

在CSS中，我們可以使用鼠標懸停（hover）事件來顯示隱藏的內(nèi)容，這種技術通常用于工具提示（tooltip）或彈出菜單（popup menu），下面是一個簡單的例子，說明如何實現(xiàn)這一功能。

HTML結構：

<div class="container">
  <p>鼠標懸停在這里顯示隱藏的內(nèi)容</p>
  <div class="tooltip">
    <p>這是隱藏的內(nèi)容，鼠標懸停時會顯示</p>
  </div>
</div>

CSS樣式：

.container {
  position: relative;
  display: inline-block;
}
.tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}
.container:hover .tooltip {
  display: block;
}

在這個例子中，我們首先將容器（container）設置為相對定位（relative），這樣內(nèi)部的元素（tooltip）就可以相對于它進行定位，我們將提示框（tooltip）設置為***定位（absolute），使其顯示在容器的下方，我們使用鼠標懸停事件來顯示提示框（tooltip）。

這只是一個簡單的例子，在實際應用中，您可能需要更復雜的交互和樣式，基本的原理是相同的：使用CSS的懸停事件來顯示或隱藏內(nèi)容。