3

我想让我的整个 div 可点击，所以我改变了 div 中链接的样式，所以它占用了 div 的整个大小。但是当我向 div 添加填充时，背景确实会扩展，但我的链接不会。

这是我所拥有的：

html：

<div id="b_register">
<a href="#"> Register </a>
</div>

CSS：

#b_register {
    background-color: #CCCCCC;
    display: block;
    float: left;
    font-size: 16px;
    height: 20px;
    margin-bottom: 5px;
    margin-right: 5px;
    padding: 10px;
    text-align: center;
    width: 110px;
}


#b_register a {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
    color:white;
}

#b_register:hover{
    background-color: #009FD6;
}

或者你也可以去那里
http://jsfiddle.net/EycDQ/1/

我想要的是使 div 即使有填充也可以点击，并且不使用 div 上的任何 Onclick 事件。

谢谢！

4

4 回答 4

2

您可以将背景颜色、悬停效果和填充移动到锚标记而不是 div 元素吗？

除非它们有某种背景，否则锚点将只有它们的文本是可点击的，或者使用填充来扩展可点击区域。间隔 gifs（1px x 1px 透明 .gifs）用于需要透明的项目，如果由于某种原因 div 必须具有背景颜色/悬停效果。

我已经修改了您的小提琴以更改以下内容：

#b_register a {
    background-color: #CCCCCC;
    padding: 10px;
    }

    #b_register a:hover{
    background-color: #009FD6;
    }

http://jsfiddle.net/EycDQ/9/

于 2013-05-31T14:39:35.030 回答
0

为什么不把<a>标签放在周围<div>而不是相反呢？

<a href="#">
  <div id="b_register">
     Register
  </div>
</a>
于 2013-05-31T13:15:19.847 回答
0

如果您想做的事情很简单，您可以简单地将事件添加onclick到您的 div 然后用于window.location = "Your_URL";更改位置

#b_register{cursor: pointer;}

<div id="b_register" onclick="window.location='google.com'">Register</div>
于 2013-05-31T13:23:21.203 回答
0

我认为您应该在标签中添加填充并调整 div 大小。

#b_register a {
    padding:10px;
}

这是一个小提琴：

http://jsfiddle.net/EycDQ/7/

于 2013-05-31T13:19:21.780 回答