Question

我在hover上使用<div>事件来显示有关该元素的其他说明。

问题在于，当您将鼠标悬停在<div>上时，它会移动其他人。基本上我希望其他所有内容保持原位，并且 blob 这个词只显示在它们的顶部。

的示例

如何更改它以便其他块不移位？

Answer 1

您的extra_info需要定位到block div

的绝对位置

.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();
});

这是 complete demo

这是 demo where the extra_info is above each parent div

Answer 2

你错过了一个下划线。

<div class="extra info">

应该是

<div class="extra_info">

停止css onhover转移所有其他块周围

2 个答案: