Links/hover 效果在固定导航栏页面的某些部分不起作用
Links/hover effect not working on certain part of page in fixed navigation bar
我一直在为朋友开发一个简单的网站,并决定使用 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;
}
下面是它的几张图片,显示了这个问题:
同样,很遗憾,我无法访问文本框的代码,因为它在 Weebly 中。
如有任何帮助,我们将不胜感激。谢谢!
你的css错了。它应该是这样的:
ul.nav {
position: fixed;
z-index: 1000;
right: 0px;
top: 20%; /* Change this to your needs */
}
我一直在为朋友开发一个简单的网站,并决定使用 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;
}
下面是它的几张图片,显示了这个问题:
同样,很遗憾,我无法访问文本框的代码,因为它在 Weebly 中。
如有任何帮助,我们将不胜感激。谢谢!
你的css错了。它应该是这样的:
ul.nav {
position: fixed;
z-index: 1000;
right: 0px;
top: 20%; /* Change this to your needs */
}