アイコン上に移動するまでDivを隠す

Question

私はこの1つの壁にレンガの壁を打った、私はユーザがアイコンの上を飛ぶまで余分なコンテンツの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」です。

ご協力いただければ幸いです。

Answer 1

あなたのCSS <i>には兄弟がいないので失敗しています。興味のある<div>は<i>の親の兄弟です。以下のCSSを追加し、

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

をそして：そのためには、次の操作を行うことができ

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

それが動作しているようです。それがあなたにも当てはまるかどうか教えてください。 fiddle

Answer 2

あなたのCSSは、しかし、これはそうではありません.canapes-ポップアップはの.Fa-カナッペ-アイコンがあなたのhtmlを見ての子であることを示唆しています。

隣接する兄弟セレクタを試しましたか？これにより、指定された要素の直後にある要素を選択することができます。

たとえば、あなたは試みることができる：

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

・ホープこれはあなたがpとあなたのdivの近くので、このCSSを使用しているため、Pのホバーに表示する必要が

Answer 3

を助け

.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）を使用して、このルールを期待どおりに適用します。

ソリューション：

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

：

あなたはadjacent sibling combinatorセレクタ、例えばとセレクタとして使用できるように、当該アイコンの収容pタグにクラスを適用します。

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

親<p>の子である（と.canapes-popupはその<p>の兄弟である）我々は.fa-canapes-iconとの関係で.canapes-popupを標的とする方法はありません。

もっと簡単な解決策は、親のホバーに.canapes-popupを表示することです。これは、マウスを動かすとポップアップを開いたままにするという影響もあります。

例えば：あなたが表示/非表示にしようとしているdiv要素である

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