Question

我已在JsFiddle上发布了我的代码。问题是，如果我悬停一个背景颜色不完全出现的链接。背景颜色仅出现在文本中。我希望基于链接的特定宽度和高度显示背景颜色。

HTML：

<div id="menu">
    <ul class="menubar">
        <li><a href="#">link</a></li>
        <li><a href="#">link1</a></li>
        <li><a href="#">link2</a>
            <ul class="sidemenu">
                <li><a href="#">sub1</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub3</a></li>
            </ul>
        </li>
        <li><a href="#">link3</a></li>
        <li><a href="#">link4</a></li>
    </ul>
</div>

CSS：

body
{
    background: rgba(120,120,120,0.1);
    padding: 0;
    margin: 0;
}
#logo
{
    height: 50px;
}
#menu
{
    background-color: #CC0000;
    height: 40px;
}
.menubar
{
    list-style-type: none;
    text-align: center;
    width: auto;
    position: relative;
}
.menubar li
{
    display: inline-block;
    padding: 10px 20px 5px 20px;
}
.menubar li a
{
    text-decoration: none;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
}
.menubar li a:hover
{
    background-color: rgba(255,255,255,0.3);
}
.sidemenu
{
    display: none;
}
.menubar li:hover .sidemenu
{
    display: block;
}
.sidemenu
{
    background-color: #CC0000;
    position: absolute;
    height: 40px;
    width: 70px;
    height: 100px;
}

.sidemenu li a:hover
{
    background-color: rgba(255,255,255,0.3);
}

Answer 1

只需改变一下：

.menubar li a:hover

对此：

.menubar li:hover

这将在悬停时将背景应用于整个列表项。

Updated fiddle

Answer 2

如果您对<li>应用效果，悬停效果将起作用，但只有鼠标完全放在链接本身上才会显示下拉列表。这可能会让用户感到困惑，因为效果和结果不同。

我建议您将填充应用于链接，以便链接区域更大。它可以解决视觉问题并改善体验。

.menubar li {
    display: inline-block;
}
.menubar li a {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
}

这是a complete Fiddle，其中包含对您的下拉列表的一些额外修复。

Answer 3

更改

.sidemenu li a :hover
{
    background-color: rgba(255,255,255,0.3);
}

与

.sidemenu li:hover
{
    background-color: rgba(255,255,255,0.3);
}

FIDDLE

onhover背景颜色在链接上不会完全显示

3 个答案: