javascript - CSS-如何在 i 标签悬停时显示面板

Question

当用户将鼠标悬停在购物车图标上时，我想打开弹出面板，例如 W3Schools 中的这个示例。

这与 SO 的收件箱类似：

我试过这段代码，但看起来我错过了一些东西。

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<i class="fa fa-shopping-cart w3-margin-right dropdown" onmouseover="javascript:void(0)"></i>
<div class="dropdown-content"><p>This is a test</p></div>
<i class="fa fa-search"></i>

标签： javascriptcsshtml

Answer 1

您也可以使用 '+' 或 '~' ，如下所示：

.dropdown:hover + .dropdown-content {
    //your css code
}
.dropdown:hover ~ .dropdown-content {
    //your css code
}