他のコンテンツをホバリングするときに特定のコンテンツをドロップ/表示する

Question

私は多くの人に助けになると思う質問がありますので、行こうと思います。

私は私が必要とする正確に何をまとめるだろうこの絵を作っ： What I need to do

私たちはホバリングしている想像して以来、だから私は、N°1と私の例では、大きな赤いボックス（コンテンツを表示する必要があります1つの特定の領域で、マウスが何をホバリングしているかに応じて、画像のステップ1部分）。

このコンテンツは、ページの残りの部分が表示されたときに下に向かって押すのに必要です。 これが簡単な場合は、ホバーコンテンツがページのコンテンツにドロップされる可能性があります。 また、このコンテンツをトランジションで表示する必要があります。

純粋なCSSで行うことはできますか？ 私は現在、これを持っている：

#hover-content { 
 
    display:none; 
 
} 
 
#parent:hover #hover-content { 
 
    display:block; 
 
}

<div id="parent"> 
 
    <div id="original"> 
 
    Original content 
 
    </div> 
 
    <div id="hover-content"> 
 
     Content displayed when hovering 
 
    </div> 
 
    Some content below, which is pushed to the bottom by the hover content 
 
</div>

この1は悪くないですが、何の移行を持っていない、と私は別のホバーコンテンツを持つ4箱のためにそれを使用できるかどうか私は知りません。また、役立つかもしれない

そしてこの、：

#hover-content { 
 
    display:hidden; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: visibility 0s, opacity 0.5s linear; 
 
} 
 
#parent:hover #hover-content { 
 
    visibility: visible; 
 
    opacity: 1; 
 
}

<div id="parent"> 
 
    <div id="original"> 
 
    My original content 
 
    </div> 
 
    <div id="hover-content"> 
 
    The content which displays only when hovering the original content 
 
    </div> 
 
    
 
</div> 
 
Some content below

この1トランジションを持っていますが、ドロップダウンしないと何も表示されていない場合は空白のままに...

私はまだ私の目標から遠いと思う。なにか提案を ？

Answer 1

これは、CSSでのみ実行できます。ホバリングされた要素の直接の兄弟である場合、他の要素にのみ影響を与えることができます。

単純なJQueryといくつかの属性を使用してください。属性を取得し、IDを作成し、要素を表示します。

HTML（例）：

<div id="parent"> 
    <table> 
     <tr> 
      <td hover-content="apples">Apples</td> 
      <td hover-content="oranges">Oranges</td> 
     </tr> 
     <tr> 
      <td hover-content="limes">Limes</td> 
      <td hover-content="blueberries">Blueberries</td> 
     </tr> 
    </table> 
</div> 

<div class="hide"> 
    <div id="apples"> Hello there apples </div> 
    <div id="oranges"> Hello there oranges </div> 
    <div id="limes"> Hello there limes </div> 
    <div id="blueberries"> Hello there blueberries </div> 
</div> 

CSS：

#parent > table { 
    width: 200px; 
    height: 100px; 
} 
#parent > table td { 
    width: 50%; 
    text-align: center; 
    border: 2px solid red; 
} 
.hide > div { 
    display: none; 
} 

はJQuery：

$(document).ready(function() { 
    $("#parent td").hover(function() { 
     // Get attribute 
     var hoverContent = $(this).attr("hover-content"); 
     console.log(hoverContent); 
     // Hide others, remove this for different style of animation 
     $(".hide > div").hide(); 
     // Slide open 
     $("#" + hoverContent).stop().slideToggle(); 
    }) 
}) 

フィドル：https://jsfiddle.net/mo1b0j4k/

Answer 2

完全に可能、あなたのJ USTは、高さを移行する必要がある -

以下の例を参照してください、私はあなただけちょうど（意味hover-contentのheightより大きくする必要があります:hoverスタイルの下max-height値を確保する必要があることを意味しており、ここでmax-heightを使用しましたあなたは正確にheightへの移行を知る必要はありません）。

#hover-content { 
 
    max-height: 0; 
 
    transition: max-height 1s ease; 
 
    overflow: hidden; 
 
} 
 
#parent:hover #hover-content { 
 
    max-height: 100px; 
 
}

<div id="parent"> 
 
    <div id="original"> 
 
     Original content 
 
    </div> 
 
    <div id="hover-content"> 
 
     Content displayed when hovering 
 
    </div> 
 
</div> 
 

 
Some content below, which is pushed to the bottom by the hover content

Answer 3

これはあなたを助けるかもしれないもう一つの選択肢かもしれません：

http://codepen.io/adamk22/pen/pbPbBq

#original1, 
#original2, 
#original3,{ 
    width: 100px; 
    height: 100px; 
    background: red; 
    display: inline-block; 
    transition: 1s; 
} 

#hover-content1, 
#hover-content2, 
#hover-content3 { 
    width: 100px; 
    height: 100px; 
    background: blue; 
    display: inline-block; 
    visibility: hidden; 
    opacity: 0; 
    transition: visibility 0s, opacity 0.5s linear; 
} 

#original1:hover ~ #hover-content1, 
#original2:hover ~ #hover-content2, 
#original3:hover ~ #hover-content3,{ 
    visibility: visible; 
    opacity: 1; 
} 

Answer 4

これは、あなたが純粋なCSSのソリューションとして探しているものかもしれません。

#hover-content { 
 
    display: hidden; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    height: 0; 
 
    transition: visibility 0s, opacity 0.5s linear; 
 
} 
 
#parent:hover #hover-content { 
 
    display: block; 
 
    height: auto; 
 
    visibility: visible; 
 
    opacity: 1; 
 
}

<div id="parent"> 
 
    <div id="original"> 
 
    My original content 
 
    </div> 
 
    <div id="hover-content"> 
 
    The content which displays only when hovering the original content 
 
    </div> 
 
    
 
</div> 
 
Some content below