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

Question

当用户将鼠标悬停在诸如this example from W3Schools之类的购物车图标上时，我想打开弹出面板。

这与SO的收件箱类似：

我尝试了this code，但似乎我缺少了一些东西。

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

Answer 1

您也可以使用“ +”或“〜”，如下所示：

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

Answer 2

由于它是同级元素，因此需要加号。

试图添加CSS：

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

正在工作的小提琴：https://jsfiddle.net/jennifergoncalves/zy0m1w32/2/

（使用“ Hello”，因为我没有加载超棒的字体）

参考：https://www.w3schools.com/css/css_combinators.asp

空格用于父子关系。

更新： 聊天后，问题中显示的HTML与实际代码不同。

实际HTML：

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

兄弟姐妹选择器不起作用，因为“下拉列表”和“下拉列表内容”实际上不是兄弟姐妹。将“ dropdown”类添加到“ p”标签似乎可以解决此问题。