Question

严格使用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>

Answer 1

问题是位置：垃圾邮件的相对性。我将位置改为绝对，并且有效。

position: absolute;

Answer 2

你需要改变你的CSS

span {position:relative}

需要设置为绝对

span {position: absolute}

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

纯CSS悬停框移动页面文本

2 个答案: