只是用一个无用的小网站自娱自乐,练习这个那个。 我遇到了一个问题,链接只能在左侧点击,而不能在右侧点击。
外观: div,里面有一个标题(2),里面有一个链接
<div class="button one"><h2><a href="#">example</a></h2></div>
它有一个右边框,一个悬停功能和相当的宽度。它是绝对定位的。尝试了一下,想出了以下代码(有点乱,抱歉)
.button{
position:absolute;
padding:0px;
margin:0px;
width:300px;
height:70px;
background-color:#999999;
border-left:solid 7px #FF6600;
border-bottom:solid 1px #FF6600;
border-top:solid 1px #FF6600;
}
.button h2{
padding:0px;
margin:0px;
text-transform:uppercase;
color:#FFFFFF;
font-size:1,5em;
}
a{
margin:0px;
display:block;
text-decoration:none;
color:#FFFFFF;
padding:20px;
}
a:hover{
background-color:#FF6600;
}
问题:链接只有大约 1/2 宽度的链接。它们的悬停背景颜色会改变整个区域,但仅当鼠标位于该链接区域时才有效。不知道我错过了什么。感谢所有帮助!
对于那些想自己查看 css 和 html 文件的人,我将它们放在一个 test.rar 文件中: http://www.sendspace.com/file/pe42e0
最佳答案
这是因为图片 #content_image_1 位于您的按钮上方。如果您从该图像中删除 z-index: 1;
,您的按钮将按预期工作。尽管按钮后面有您的图像。
关于html - 需要帮助修复链接的可点击区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15671622/