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

将显示属性设置为＆＃34; block＆＃34;对于＆＃34; a＆＃34;元素：

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

.sidebarlinks a {
    display: block;
}

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

Answer 2

您需要先为可点击按钮定义您的区域。而且你还有很多不需要的代码。不要h2 li's。使用字体/文本样式。也不要使用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;
}

Answer 3

尝试在LI而不是链接上设置背景颜色。应该这样做......

See

HTH：）

Answer 4

尝试使背景颜色透明background-color: transparent;或不使用任何背景颜色

Answer 5

正如@LDJ已经指出的那样，您只需更改<li>悬停事件即可匹配<a>悬停事件。

OR

<a>悬停时，您可以进行<li>更改。

li.sidebarlinks:hover {
    background: #ccc;
}
li.sidebarlinks:hover > a {
    background: #ccc;
}

我还会避免将您的<h2>标记覆盖在其他标记上，因为它可能会导致您的SEO混淆。 ul { 保证金权：20px的;保证金左：-25px }

    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
    }


    li.sidebarlinks:hover {
        background: #9AFEFF;
    }

    li.sidebarlinks:hover > a {
        background: #9AFEFF;
    }

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

Answer 6

小提琴： http://jsfiddle.net/ug2Sc/

代码：

a {
    text-decoration:none;
    color:black;
    font-size:35px;
    background-color:#9AFEFF
}
a:hover{
    text-decoration:underline;
    background-color:#CCFFFF;
}
.sidebarlinks a {
    display: block;
    border:2px solid black;
    border-radius:10px;
    text-align: center;
}
.sidebarlinks {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}

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

6 个答案: