Question

我在这个问题上打了一堵砖墙，我正在一个网站上工作，我需要隐藏DIV的额外内容，直到用户将鼠标悬停在图标上，但我无法弄清楚如何做到这一点。我尝试了各种不同的方式（＆gt;，+和〜），但我不能让它工作。

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'，其中包含我想要添加的点心图标。

非常感谢任何帮助。

Answer 1

你的css会建议 .canapes-popup 是 .fa-canapes-icon 的孩子，看看你的html然而事实并非如此。

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

例如，您可以尝试：

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

希望这有帮助

Answer 2

你的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 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>

Answer 4

问题：

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

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

...弹出元素（.canapes-popup）必须嵌套在图标元素（.fa-canapes-icon）中，才能按预期应用此规则。 / p>

解决方案：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

More on CSS combinators

Answer 5

由于.fa-canapes-icon是其父级<p>的子级（并且.canapes-popup是<p>的兄弟），我们无法定位.canapes-popup与.fa-canapes-icon的关系。

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

E.G：

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

隐藏Div，直到悬停在图标上

5 个答案: