CODEWITHSUNDEEP
htmlcss
Tom Bird
Tom Bird

Reputation: 5

Hide Div until hover on icon

I have hit a brick wall on this one, I am working on a website where I need to hide a DIV of extra content until the user hovers over an icon but I cannot figure out how to do this. I have tried various different ways (>, + and ~) but I just cant get it to work.

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>

The page can be viewed here and it is the 'wedding package 3' with the canapes i icon that I am trying to add it onto.

Any help would be greatly appreciated.

Upvotes: 0

Views: 1168

Answers (5)

Moob
Moob

Reputation: 16204

As .fa-canapes-icon is a child of its parent <p> (and .canapes-popup is a sibling of that <p>) we have no way of targeting .canapes-popup in relation to .fa-canapes-icon.

A much simpler solution would be to display the .canapes-popup on hover of its parent. This also has the affect of keeping the popup open when you move the mouse inside it.

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>

Upvotes: 0

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

You need to display on hover of p because p and your div is nearby so use this 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>

Upvotes: 0

UncaughtTypeError
UncaughtTypeError

Reputation: 8752

The Problem:

The manner in which you have your css selectors currently defined:

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

...the popup element (.canapes-popup) would have to be nested within the icon element (.fa-canapes-icon) in order for this rule to apply as expected.

The Solution:

Apply a class to the containing p tag of the icon in question so that you can use it as a selector with the adjacent sibling combinator selector, e.g:

.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

Upvotes: 0

trk
trk

Reputation: 2228

Your css is failing since <i> does NOT have any siblings; and your <div> of interest is a sibling to <i>'s parent. Therefore, you could do the following: 

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

And, add the following CSS: 

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

It seems to be working. Let me know if it does for you too. fiddle

Upvotes: 1

JParkinson1991
JParkinson1991

Reputation: 1286

Your css would suggest that .canapes-popup is a child of .fa-canapes-icon looking at your html however this is not the case.

Have you tried the adjacent sibling selector. This allows you to select a an element that is directly after one specified.

For example you could try:

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

Hope this helps

Upvotes: 1

Related Questions