隐藏 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>

该页面可以查看here，它是“婚礼套餐 3”，我尝试将其添加到带有小食 i 图标的位置。

任何帮助将不胜感激。

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;
}

它似乎正在工作。让我知道它是否也适合你。 fiddle

Answer 2

您的 css 会建议 .canapes-popup 是 .fa-canapes-icon 的子级，正在查看您的 html，但事实并非如此。

您是否尝试过相邻兄弟选择器。这允许您选择一个紧跟在指定元素之后的元素。

例如，您可以尝试：

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

希望对你有帮助

Answer 3

问题：

当前定义 css 选择器的方式：

.fa-canapes-icon:hover .canapes-popup

...弹出元素 (.canapes-popup) 必须嵌套在图标元素中 (.fa-canapes-icon) 才能按预期应用此规则。

解决方案：

将一个类应用于相关图标的包含p 标记，以便您可以将其用作带有adjacent sibling combinator 选择器的选择器，例如：

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

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

.canapes-popup {
  display: none;
}

<div class="canapes">
  <p class="canapes-icon">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>

More on CSS combinators

Answer 4

你需要在 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>

Answer 5

由于.fa-canapes-icon 是其父级<p> 的子级（而.canapes-popup 是该<p> 的兄弟级），因此我们无法针对.fa-canapes-icon 定位.canapes-popup。

一个更简单的解决方案是在其父级悬停时显示.canapes-popup。当您在其中移动鼠标时，这也具有保持弹出窗口打开的效果。

例如：

.canapes-popup {
  display: none;
}

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