0

我hover在 a 上使用事件<div>来对元素进行附加描述。

问题是，当您将鼠标悬停在 a 上时，<div>它会使其他人四处移动。基本上我希望其他所有东西都留在原地，并且blob这个词只出现在它们的顶部。

这是一个概述问题的jsfiddle示例

如何更改它以使其他块不移动？

4

2 回答 2

2

您extra_info需要绝对定位到blockdiv

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

于 2013-09-19T14:53:02.320 回答
0

你少了一个下划线。

<div class="extra info">

应该

<div class="extra_info">
于 2013-09-19T14:38:19.957 回答