需要帮助修复链接的可点击区域 [英] need help fixing the link's clickable area

问题描述

只是有点搞笑自己与一个无用的网站，练习这个。
我遇到一个问题，其中的链接只能在左边点击，不是正确的。

它的外观：
div，inside它包含一个链接的标题（2）。

 < div class =button one>< h2& < a href =＃>示例< / a>< / h2>< / div> 
  

它有一个右边框，悬停函数和相当宽度。它是绝对定位的。尝试了一下，得出了以下代码（这是一个bith凌乱，对不起）

  .button {
位置：绝对; 
 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; ，您的按钮按预期工作。虽然你的图像背后的按钮。 
 
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
解决方案
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. 

                        
这篇关于需要帮助修复链接的可点击区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！