问题
Was just amusing myself with a little useless site, practicing this and that. I came across a problem, where the link is only clickable on the left, not the right.
how it looks: div, inside it a header(2) with in it a link
<div class="button one"><h2><a href="#">example</a></h2></div>
It has a right border, a hover function and quite a width. It is absolute positioned. Been trying around a bit a came up with following code (it is a bith messy, sorry)
.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;
}
problem: links are only links up about 1/2 the width. They background color of the hover changes the complete area, but only works when the mouse is in that link area. Not sure where I missed something. All help is appreciated!
For those who want to look into the css and html files themselves, i put them in a test.rar file: http://www.sendspace.com/file/pe42e0
回答1:
It's because the image #content_image_1 is positioned above your buttons. If you remove the z-index: 1; from that image, your buttons work as intended. Albeit with your image behind the buttons.
来源：https://stackoverflow.com/questions/15671622/need-help-fixing-the-links-clickable-area