0

Using strictly CSS, am trying to make a description box. So far, so good, it looks great. But one problem. When hovering over, it moves the rest of the page around to make space for the initial would be placement of the box. How can I get all of the text on the page to stay static when hovering over the trigger text? Also, I'm using Drupal, Danland theme, not that I believe that would make any difference under the given circumstances.

    <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 に答える