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

时间:2013-09-04 15:23:22

标签: html css

这样可以让我的链接背景颜色扩展,以便它涵盖我的边界内的所有内容

看看它现在的样子:

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
}

6 个答案:

答案 0 :(得分:1)

将显示属性设置为&#34; block&#34;对于&#34; a&#34;元素:

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

.sidebarlinks a {
    display: block;
}

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

答案 1 :(得分:1)

您需要先为可点击按钮定义您的区域。而且你还有很多不需要的代码。不要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;
}

答案 2 :(得分:0)

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

See

HTH:)

答案 3 :(得分:0)

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

答案 4 :(得分:0)

正如@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>

答案 5 :(得分: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;
}