链接/悬停效果无法在固定导航栏

时间:2015-12-12 21:18:39

标签: html css hyperlink navigation nav

我一直在为朋友创建一个简单的网站,并决定使用Weebly(是的,我知道,nooby),因为我不想从头开始一个简单的网站。我在页面右侧添加了一个固定的导航栏,其形式为圆形按钮,并附有链接。不幸的是,当我滚动时,一旦我到达页面上的文本框,链接和悬停效果就会停止工作(按钮仍然可以正常滚动)。一旦通过它,它们就会再次起作用。由于我使用的是Weebly,我无法完全访问页面中的所有html,但我可以完全访问CSS文件。这就是我的代码在带有3个按钮的导航栏中的样子:

<div data-spy="affix" class="offset8 span1 well offset7 small  nav">
        <ul class="nav nav-list">
            <p><a href="#A"><img src="http://i.imgur.com/wV1JVH2.png" height="32" width="32" onmouseover="this.src='http://i.imgur.com/whPzX4a.png'" onmouseout="this.src='http://i.imgur.com/wV1JVH2.png'" <a></p>
<p><a href="#B"><img src="http://i.imgur.com/wV1JVH2.png" height="32" width="32" onmouseover="this.src='http://i.imgur.com/whPzX4a.png'" onmouseout="this.src='http://i.imgur.com/wV1JVH2.png'" <a></p>
<p><a href="#L384"><img src="http://i.imgur.com/wV1JVH2.png" height="32" width="32" onmouseover="this.src='http://i.imgur.com/whPzX4a.png'" onmouseout="this.src='http://i.imgur.com/wV1JVH2.png'" <a></p>
        </ul>
</div>

这是CSS:

nav {
position: fixed;
float: right;
right: 0px;
!important;
}

这里有几张关于它的图片,显示了这个问题:

Working before the textbox

Not working during the textbox

同样,我很遗憾无法访问文本框的代码,因为它位于Weebly中。

非常感谢任何帮助。谢谢!

1 个答案:

答案 0 :(得分:1)

你的CSS错了。它应该是这样的:

ul.nav {
    position: fixed;
    z-index: 1000;
    right: 0px;
    top: 20%; /* Change this to your needs */
}