html - 我如何使我的链接的背景颜色与我的边框相匹配

Question

还有什么方法可以扩展我的链接背景颜色，使其覆盖我边界内的所有内容

这是它现在的样子:

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
}

Answer 1

将“a”元素的显示属性设置为“ block ”:

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

.sidebarlinks a {
    display: block;
}

这种方法的优点是整个区域都可以悬停和点击。