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 で Onclick イベントを使用せずに、パディングがあっても div をクリックできるようにすることです。

ありがとうございました！

4

4 に答える 4

2

背景色、ホバー効果、パディングを div 要素ではなくアンカー タグに移動できますか?

アンカーは、なんらかの背景がない限り、またはパディングを使用してクリック可能な領域を拡張しない限り、テキストのみをクリック可能にします。スペーサー gif (1 ピクセル x 1 ピクセルの透明な .gif) は、何らかの理由で 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

タグにパディングを追加し、div サイズを調整する必要があると思います。

#b_register a {
    padding:10px;
}

ここにフィドルがあります：

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

于 2013-05-31T13:19:21.780 に答える
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 に答える