隐藏Div直到悬停在图标上

Question

我碰到了砖墙，我在一个网站上工作，我需要隐藏一个额外内容的DIV，直到用户盘旋在一个图标上，但我不知道如何做到这一点。我尝试过各种不同的方法(>，+和~)，但我只是无法使它发挥作用。

HTML

​

.fa-canapes-icon:hover .canapes-popup{
    display:block;
    
}

<div class="canapes">
<p>Canapes <i class="fa fa-info-circle fa-canapes-icon"></i></p>
<div class="canapes-popup">
<h1>Example Canape Menu</h1>
<p>This is a popular selection. We do of course have other options we are happy to discuss with you.<br>
Mini Yorkshires with Medium Roast Beef and Horseradish<br>
Satay Chicken Skewers with a Peanut Sauce<br>
Spicy Prawn with Mango<br>
Smoked Salmon &amp; Mascarpone crostini with Dill &amp; Lemon<br>
Mozzerella Pearls with Sun-blush tomatoes &amp; Fresh Basil (V)<br>
Honey and Sesame Coated Cocktail Sausages</p>
</div>
</div>

​

该页面可以查看这里，它是‘婚礼包3’与我的糖果图标，我试图把它添加到。

任何帮助都将不胜感激。

Answer 1

您的css失败了，因为<i>没有任何兄弟姐妹；而您感兴趣的<div>是<i>的父母的兄弟姐妹。因此，您可以这样做：

<p class="icon-container">Canapes <i class="fa fa-info-circle fa-canapes-icon"></i></p>

并添加以下CSS：

.icon-container:hover + .canapes-popup {
    display: block;
}

好像起作用了。如果对你也适用的话，请告诉我。小提琴

Answer 2

您的css会表明，.canapes-popup是.fa-canapes-icon的子代，查看您的html，但事实并非如此。

您是否尝试过相邻的同级选择器。这允许您选择一个直接在指定的元素之后的元素。

例如，您可以尝试：

.fa-canapes-icon:hover + .canapes-popup{
    display:block;   
}

希望这能有所帮助

Answer 3

你需要在p的悬停上显示，因为p和你的div就在附近，所以使用这个css。

​

.canapes-popup{
    display:none;
    
}
p:hover + .canapes-popup{
    display:block;
    
}

<div class="canapes">
<p>Canapes <i class="fa fa-info-circle fa-canapes-icon"></i></p>
<div class="canapes-popup">
<h1>Example Canape Menu</h1>
<p>This is a popular selection. We do of course have other options we are happy to discuss with you.<br>
Mini Yorkshires with Medium Roast Beef and Horseradish<br>
Satay Chicken Skewers with a Peanut Sauce<br>
Spicy Prawn with Mango<br>
Smoked Salmon &amp; Mascarpone crostini with Dill &amp; Lemon<br>
Mozzerella Pearls with Sun-blush tomatoes &amp; Fresh Basil (V)<br>
Honey and Sesame Coated Cocktail Sausages</p>
</div>
</div>

​