2

好的，所以我在我的 div 中有我的 tex，我将我的 div 设置为移动，但我需要我的文本保持在同一个地方，有人可以帮我吗？

<div id="nav_bar_menu">
      <div id="pocetna" ><div class="moving_background_nav_bar_img"><p id="pocetna_paragraf">POCETNA</p></div></div>

</div><!-- Menu -->

这是我的CSS

#nav_bar_menu {
    height: 38px;
    width: 580px;
    float: right;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 93px;
    overflow: hidden;

}
.moving_background_nav_bar_img {
    background: url(../Images/images/nav_bar_pictures_01.jpg);
    -moz-transition: top 0.7s;
    -webkit-transition: top 0.7s;
    -o-transition: top 0.7s;
    transition: top 0.7s;
    position: relative;
    height: 76px;
    top: 0;
    }
#pocetna {
    height: 38px;
    width: 131px;
    }
.moving_background_nav_bar_img:hover {
    top: -38px;
    position: relative;
    }

这是图片应该是什么样子http://i.imgur.com/0HhAiGT.png

如果我为文本设置固定位置，那么如果我向下滚动它仍然在页面上的位置...我不希望导航栏在滚动时跟随我。

4

2 回答 2

1

您只需将固定位置添加到段落的 ID

#pocetna_paragraf{
position:fixed;
}
于 2013-09-12T18:09:30.817 回答
0

好的没错，当您向下滚动时，文本不会向下移动。对不起，我稍后发布了无论如何我尝试了不同的方法，但是当您将鼠标悬停在文本上时，缓动效果将不起作用，而当您将鼠标悬停在图像上时，问题将完美运行。

希望有人能弄清楚我们需要做什么。这是代码

CSS：

a#one {
    width:64px;
    height:64px;
    display:block;
    text-indent:-9999px; /* hide the text */
    background:url(background.png) top left;/* Do not forget to set your own image*/
}

a#one:hover {
    background-position:bottom left;
}

a#one {
    width:64px;
    height:64px;
    display:block;
    text-indent:-9999px; /* hide the text*/
    background:url(background.png) top left;
    -moz-transition:background 300ms ease-in-out;
    -webkit-transition:background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}

#two{
position:absolute;
top:25px;
left:25px;
}

HTML：

<a href ="http://google.com" id="one">Hover image</a>
<a href="http://google.com" id="two">Text</a>

基本上我做了两个链接，我用文本缩进隐藏了第一个文本并使背景变得轻松。第二个只是显示链接而不上下滚动。

于 2013-09-13T12:29:32.777 回答