html - css onhover を停止して、他のすべてのブロックを移動する

Question

要素に関する追加の説明を表示するために、hoverイベントを使用しています。<div>

問題は、上にカーソルを合わせると<div>、他の人が移動することです。基本的に、他のすべてをそのままにして、blobという単語がその上に表示されるようにしたいと考えています。

問題の概要を示すjsfiddleの例を次に示します

他のブロックが移動しないように変更するにはどうすればよいですか?

Answer 1

あなたのニーズはdivextra_infoに絶対に配置する必要がありますblock

.link{
    position:relative;
    margin : 2em 0em 2em 1.5em;
    float: left;
    width: 10.4em;
    min-height: 17em; 
    max-height: 18.5em;
    text-align: center;
    padding: 0em 0.1em 0.1em 0.1em; 
    background-color: #276277;
}

.block { position:relative; float:left; }

.extra_info{
    z-index: 900;
    position: absolute;
    top: 30px;
    left: 30px;
    display: none;
    width: 275px;
    background: #FFFFBC;
    border-style: inset;
    border-width: 5px;
}

また、jqueryでこれを行う必要があると思います

$('.link').hover(function() {
    // show the box
    $(this).siblings('.extra_info').toggle();
});

ここに完全なデモがあります

これは、extra_info が各親 div の上にあるデモです。

Answer 2

アンダースコアがありません。

<div class="extra info">

する必要があります

<div class="extra_info">