1

这是我的代码。的HTML：

<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic1.jpg" title="Bottle in the   mirror"><img src="images/250-width/pic1.jpg" alt="" width="250px" height="250px"     id="Bottleinthemirrorpic"></a>
<span id="Bottleinthemirror" class="spanlink"><p>Bottle in the mirror<p></span>
</div>

<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic9.jpg" title="The empty glass"><img src="images/250-width/pic9.jpg" alt="" width="250px" height="250px"></a>
</div>

<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic10.jpg" title="The last drop"><img src="images/250-width/pic10.jpg" alt="" width="250px" height="250px"></a>
</div>

CSS：

#Bottleinthemirror {
    width: 250px;
    height: 90px;
    position: absolute;
    background-color: rgba(0,0,0,.55);
    margin-top: 10px;
    color: white;
    line-height: 20px;
    font-size: 12px;
}
.column1of4 {
    margin: 50px;
    float: left;    
}

Javascript：

$('#Bottleinthemirror').hide();
$('#Bottleinthemirrorpic, #Bottleinthemirror').hover(function(){
 //in
  $('#Bottleinthemirror').show();

},function(){
 //out
 $('#Bottleinthemirror').hide();
});

基本上，我有三张图片，其中两张并排，第三张在第一张下方。我将鼠标悬停在第一张图片上，我希望 #bottleinthemirror 跨度出现，它确实如此。问题是，即使 span 被隐藏，它仍然会重新排列网站的布局并将其下方的图片移动到另一个位置，即使它的位置设置为绝对。知道为什么吗？当我删除跨度时，网站布局是正常的。即使跨度位置是绝对的，当我放入跨度时它也会发生变化。

4

3 回答 3

3

可能问题是span不能包含p，并且在您的代码中有技术上p的 2 个元素span（两个p标签都在打开）。当浏览器修复这个不正确的标记时，最后的一部分p可能会出现在span. 如果需要pinside .spanlink，最好使用div而不是span. 但是p这里真的有必要吗？

于 2013-07-17T21:06:38.983 回答
0

我在 jsfiddle 中进行了设置：http: //jsfiddle.net/r2XG2/1/它似乎在 Chrome 中为我工作。你用的是什么浏览器？如果它仍然不适合您，我会尝试以下操作：

设置z-index: 100看看这是否会迫使它出现在其他元素上。您也可以尝试在 css 中设置toporleft值，这也可能迫使它出现在正确的位置。添加display: block;也不会受到伤害。

编辑：使用来自询问者的最新更新更新小提琴它也似乎 IE 不会加载 jsfiddle。我添加position: relative到父 div 以查看是否有帮助。

#Bottleinthemirror {
    width: 250px;
    height: 90px;
    position: absolute;
    background-color: rgba(0,0,0,.55);
    margin-top: 10px;
    color: white;
    line-height: 20px;
    font-size: 12px;
    z-index: 100;
    display: block;
}

.column1of4 {
    margin: 50px;
    float: left;
    position: relative;
}
于 2013-07-17T20:53:01.170 回答
0

添加

display: block;

至

#Bottleinthemirror
于 2013-07-17T21:03:54.327 回答