Question

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

有没有办法确保它不会发生并且旁边的图像保持在其位置 - 只有它下面的图像向下移动？

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;
}

我该怎么做？

Answer 1

您只能在页面中使用一次ID，因此最好从ID更改为类;所以你可以多次重复上课。要解决此问题，您必须将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;
}

Answer 2

您应该将#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 :) -->

Answer 3

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

即可

vertical-align: top;

它应该解决你的问题。

如何在其他div仍然存在的情况下显示悬停上的标题

3 个答案: