CSS相对定位防止点击链接
请看我这里的JSFIDLE-。我知道为什么链接不起作用,因为我用来创建我想要的链接/菜单背景的相对定位覆盖了a元素,但我无法解决这个问题(在li和a元素上尝试了相对和z索引,加上添加和额外的div来跨越a元素,使用它来创建“按钮”样式的背景)但一切都无济于事CSS相对定位防止点击链接,css,Css,请看我这里的JSFIDLE-。我知道为什么链接不起作用,因为我用来创建我想要的链接/菜单背景的相对定位覆盖了a元素,但我无法解决这个问题(在li和a元素上尝试了相对和z索引,加上添加和额外的div来跨越a元素,使用它来创建“按钮”样式的背景)但一切都无济于事 li { list-style: none; } .side-nav li { padding-bottom: 3.125em; width: 100%; line-height: 1.25em; text-alig
li {
list-style: none;
}
.side-nav li {
padding-bottom: 3.125em;
width: 100%;
line-height: 1.25em;
text-align: center;
}
.side-nav a {
position: relative;
top: 1.75em;
z-index: -1;
display: block;
color: white;
text-decoration: none;
background: #c7cbaf;
-webkit-border-radius: 48px;
-moz-border-radius: 48px;
-ms-border-radius: 48px;
-o-border-radius: 48px;
border-radius: 48px;
padding-top: 1.375em;
padding-bottom: 0.75em;
text-transform: uppercase;
}
.responsive-side-nav {
background: transparent url(http://thewebbakery.co.uk/assets/graphics/responsive-icon-sml.png) no-repeat top center;
}
.interactive-side-nav {
background: transparent url(http://thewebbakery.co.uk/assets/graphics/interactive-icon-sml.png) no-repeat top center;
}
.ux-side-nav {
background: transparent url(http://thewebbakery.co.uk/assets/graphics/ux-icon-sml.png) no-repeat top center;
}
有人能帮忙吗?如果将标签显示为“块”,则必须设置标签的高度和宽度。这里有一个可能的解决方案:
唯一的缺点是按钮的点击区域会增加,以适应图像的大小。但是,如果您希望图像重叠,同时可以单击整个图像,我不确定这是否可行。谢谢您,但这不起作用(它将图标放在链接背景后面,这正是我不希望看到的),另外,在使用blockThank显示时,您不必设置高度和宽度。谢谢,这很有效。我担心a标记中的div会使css无效,但它似乎听不到。也许值得注意的是,在HTML4中,您不应该将块元素放在锚定标记中,但在HTML5中,这很好!
<nav class="side-nav" role=navigation>
<ul>
<li><a href="#"><div id="responsive-side-nav" class="side-nav-image"></div>Responsive Web Design</a></li>
<li><a href="#"><div id="interactive-side-nav" class="side-nav-image"></div>Interactive Web Design</a></li>
<li><a href="#"><div id="ux-side-nav" class="side-nav-image"></div>User Experience</a></li>
</ul>
.side-nav-image
{
width: 100%;
height: 50px;
margin-top: -50px;
}