0

リンクの背景色を拡張して、境界線内のすべてをカバーする方法はありますか

現在の外観は次のとおりです。

http://i.imgur.com/7MWpfw2.png

htmlコード

<style>
    a:hover{
text-decoration:underline;
background-color:#CCFFFF;}
</style>

        <ul style="margin-right:20px; margin-left:-25px">
    <h2>
        <li class="sidebarlinks"><a href="test3.html">Kappa</a></li>
        <br>
        <li class="sidebarlinks"><a href="test2.html">Banana</a></li>
        <br>
        <li class="sidebarlinks"><a href="test1.html">Energydrink</a></li>
    </h2>
    </ul>

CSSコード

a:link {
text-decoration:none;
color:black;
font-size:35px;
background-color:#9AFEFF
}

a:visited {
text-decoration:none;
}
.sidebarlinks {
border:2px solid black;
border-radius:10px
}
4

6 に答える 6

1

「a」要素の表示プロパティを「block」に設定します。

http://jsfiddle.net/tVP87/1/

.sidebarlinks a {
    display: block;
}

この方法の利点は、領域全体がホバー可能かつクリック可能になることです。

于 2013-09-04T15:34:51.257 に答える
1

まず、クリック可能なボタンの領域を最初に定義する必要があります。また、そこには多くの不要なコードが配置されています。h2 li をしないでください。フォント/テキスト スタイルを使用します。また、2 つの形式の CSS を使用しないでください。あなたはそれをインラインで、私が見るものから分離しています。そして、ul の左右の余白を持つことのポイントは何ですか??

次のようになります。

JSFiddle

HTML:

<ul>
    <li class="sidebarlinks"><a href="test3.html">Kappa</a></li>
    <li class="sidebarlinks"><a href="test2.html">Banana</a></li>
    <li class="sidebarlinks"><a href="test1.html">Energydrink</a></li>
</ul>

CSS:

li {
    font-size:200%;
    width:300px;
    text-transform:uppercase;
    background-color:#9AFEFF
}
a:link {
    text-decoration:none;
    color:black;
    font-size:35px;

}
a:visited {
    text-decoration:none;
}
.sidebarlinks {
    border:2px solid black;
    border-radius:10px
}
li:hover {
    background-color:#CCFFFF;
}
a:hover{
    text-decoration:underline;
}
于 2013-09-04T15:35:30.083 に答える
0

背景色を透明にするか、 background-color: transparent;背景色を使用しないようにしてください

于 2013-09-04T15:28:28.307 に答える
0

リンクではなく LI に背景色を設定してみてください。それはそれを行う必要があります...

見る

HTH :)

于 2013-09-04T15:26:18.387 に答える