如何在悬停时显示标题，而其他 div 保持原位答案

【问题标题】：How to reveal caption on hover while other divs remain in place如何在悬停时显示标题，而其他 div 保持原位
【发布时间】：2014-05-04 14:41:36
【问题描述】：

当我将鼠标悬停在图像上时，它旁边的图像也会向下移动。

有什么方法可以确保不会发生这种情况，并且它旁边的图像保持在原来的位置 - 只有它下面的图像会向下移动？

我在这里做了一个例子：http://jsfiddle.net/YJ96L/

HTML：

   <div id="kidz"><img src="http://www.1000fraggers.com/fraggersbrand/frag1000.jpg"><span>yo</span></div>
 <div id="kidz"><img src="http://www.1000fraggers.com/fraggersbrand/frag1000.jpg"><span>yo</span></div>
 <div id="kidz"><img src="http://www.1000fraggers.com/fraggersbrand/frag1000.jpg"><span>yo</span></div>
 <div id="kidz"><img src="http://www.1000fraggers.com/fraggersbrand/frag1000.jpg"><span>yo</span></div>
  <div id="kidz"><img src="http://www.1000fraggers.com/fraggersbrand/frag1000.jpg"><span>yo</span></div>
 <div id="kidz"><img src="http://www.1000fraggers.com/fraggersbrand/frag1000.jpg"><span>yo</span></div>
 <div id="kidz"><img src="http://www.1000fraggers.com/fraggersbrand/frag1000.jpg"><span>yo</span></div>
 <div id="kidz"><img src="http://www.1000fraggers.com/fraggersbrand/frag1000.jpg"><span>yo</span></div>

CSS：

  #kidz {
    width:300px;
    display:inline-block;
    margin-bottom:20px;
            -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out;
}

#kidz:nth-of-type(odd) {
    margin-right:10px;
}

#kidz:nth-of-type(even) {
 margin-left:10px;   
}

#kidz img {
    height:250px;
    width:300px;
}

#kidz span {
    display: block;
    background:#dcdcdc;
    color: #222222;
    position: relative;
    top:5px;
    font-size:10px;
    width: 300px;
    height: 0px;
    overflow-y:auto;
    opacity: 0;
    text-align: justify;
        -webkit-transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
    -ms-transition:all 0.4s ease;
    transition:all 0.4s ease;
}

#kidz:hover span {
        height: 150px;
    opacity: 1;
}

我该怎么做？

【问题讨论】：

标签： css html hover

【解决方案1】：

只需将以下 css 属性添加到您的 #kidz css：

vertical-align: top;

它应该可以解决您的问题。

【讨论】：

【解决方案2】：

ID只能在页面中使用一次，所以最好从ID改为class；所以你可以重复上课很多次。要解决此问题，您必须将 position:absolute 定义为 #kidz span，我已将其更改为 .kidz span。

此外，它对所有图像的悬停效果工作必须将position:relative; 添加到 ID #kidz。我在.kidz 课堂上转换了它。检查Demo。

.kidz {position:relative;}

.kidz span {
    display: block;
    background:#dcdcdc;
    color: #222222;
    position: absolute; /* Add position:absolute*/
    top:5px;
    font-size:10px;
    width: 300px;
    height: 0px;
    overflow-y:auto;
    opacity: 0;
    text-align: justify;
    -webkit-transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
    -ms-transition:all 0.4s ease;
    transition:all 0.4s ease;
}

【讨论】：

【解决方案3】：

你应该把你的 #kidz 变成 .kidz 。 ID 在文档中只能使用一次。

然后，基本上，将父容器设置为relative 和span 到absolute .http://jsfiddle.net/YJ96L/1/

.kidz {
    width:300px;
    position:relative;
    display:inline-block;
    margin-bottom:20px;
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    -ms-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
}
.kidz:nth-of-type(odd) {
    margin-right:10px;
}
.kidz:nth-of-type(even) {
    margin-left:10px;
}
.kidz img {
    height:250px;
    width:300px;
}
.kidz span {
    display: block;
    background:#dcdcdc;
    color: #222222;
    position: absolute;
    top:5px;
    font-size:10px;
    width: 300px;
    height: 0px;
    overflow-y:auto;
    opacity: 0;
    text-align: justify;
    -webkit-transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
    -ms-transition:all 0.4s ease;
    transition:all 0.4s ease;
}
.kidz:hover span {
    height: 150px;
    opacity: 1;
}

<div class="kidz">
    <img src="http://www.1000fraggers.com/fraggersbrand/frag1000.jpg" /><span>yo</span>
</div>
<div class="kidz">
    <img src="http://www.1000fraggers.com/fraggersbrand/frag1000.jpg" /><span>yo</span>
</div><!-- and so on with as many .kidz + span needed :) -->

【讨论】：