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

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

看

HTH :)

于 2013-09-04T15:26:18.387 回答
0

尽量使背景色透明 background-color: transparent;或不使用任何背景色

于 2013-09-04T15:28:28.307 回答
0

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

或者

悬停时您可以进行<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>
于 2013-09-04T15:30:51.127 回答
0

小提琴：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;
}
于 2013-09-04T15:51:11.770 回答