0

严格使用 CSS，我试图制作一个描述框。到目前为止，一切都很好，看起来很棒。但是一个问题。当悬停在上面时，它会移动页面的其余部分，以便为最初放置框腾出空间。将鼠标悬停在触发文本上时，如何使页面上的所有文本保持静态？另外，我使用的是 Drupal，Danland 主题，并不是说我相信在给定的情况下会有所作为。

    <style>
    span{
    background:#F8F8F8;
    border: 5px solid #DFDFDF;
    color: #717171;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 30px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    top: -200px;
    left:-30px;
    display:none;
    }
        span:after{
    content:'';
    position:absolute;
    bottom:-10px;
    width:10px;
    height:10px;
    border-right:5px solid #dfdfdf;
    border-bottom:5px solid #dfdfdf;
    background:#f8f8f8;
    left:31%;
    margin-left:-10px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    display:inline;
    }
        p{
    margin:10px;
    float:left;
    position:relative;
    cursor:pointer;
    overflow:visible;
    }

        p:hover span{
    display:block;
    }</style>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>Angkor Wat<span><img width="300" src="http://www.lotusangkortravel.com/themes/danland/images/slideshows/angkor-wat.JPG"><br>
Angkor Wat central complex</span></p>
<br><br><br>
<b>This text should not move on hover.</b>
4

2 回答 2

1

问题是位置：垃圾邮件的相对位置。我将位置更改为绝对位置，它可以工作。

position: absolute;
于 2013-09-10T04:33:50.570 回答
0

你需要改变你的CSS

span {position:relative}

需要设置为绝对

span {position: absolute}

那么它不会影响页面中其余元素的布局。您必须修改位置以将元素显示在您想要的位置。

于 2013-09-10T04:35:49.967 回答