Question

好的，所以我在我的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

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

Answer 1

您需要做的就是将固定定位添加到段落的ID

#pocetna_paragraf{
position:fixed;
}

Answer 2

好的，当你向下滚动时，文字不会向下移动。对不起，我稍后发布了无论如何我尝试了不同的方法，但是当你将鼠标悬停在文本上时，缓解效果无法解决问题，当你将鼠标悬停在图像上时，效果会很好。

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

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>

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

如何设置我的文本不要移动，但仍然让我的CSS正常工作

2 个答案: