Question

我在让这个代码播放器正常运行时遇到问题：

当我将鼠标悬停在列表项目上时（列表项目是顶部的四个标签），背景会发生变化，但它不会填充两侧的空间。我试图从其他源代码中学习，但我无法完全调整，但仍然存在问题。

问题：如果将鼠标悬停在列表项上，背景会改变并适合背景，我怎样才能这样做？

如果您转到我的网站链接，当您将鼠标悬停在其中一个元素上时，您会看到我的意思。它只是改变颜色，但不像我预期的那样。

这里有相关的CSS，让我知道它是否可怕，我能做得更好，我还在学习：

    #codetabs{
        width: 197px;
        height: 30px;
        position: relative;
        top: 8px;
        background-color: white;
        border: 2px solid #B7B7B7;
        border-radius: 10px;
        margin: 0px auto;
        padding: 0;
        }

    #codetabs ul{
        height: 50px;
        position: relative;
        margin: 0px auto;
        padding-left: 5px;
        }

    #codetabs li{
        text-align: center;
        float: left;
        height: 23px;
        list-style: none;
        margin: 0px;
        padding: 7px 5px 0px 5px;
        border-right: 2px solid #B7B7B7;
        }

    #codetabs li:hover{
        background-color: grey;
        }

如果有人认为我可能遗漏了任何重要的代码或信息，请告诉我。我不相信HTML是必要的。

Answer 1

基本上你的问题是你的列表项都是包含在药丸盒中的矩形（id =“codetabs”）。如果希望背景颜色填充每个按钮，则需要使用一些伪类（：first-child和：last-child）来指定第一个和最后一个li项的边框半径值。

Answer 2

这是有效的CSS：

#codetabs{
    width: 197px;
    height: 30px;
    position: relative;
    top: 8px;
    background-color: white;
    margin: 0 auto;
    padding: 0;
}

#codetabs ul{
    height: 50px;
    position: relative;
    margin: 0 auto;
    padding-left: 5px;
}

#codetabs li{
    text-align: center;
    float: left;
    height: 23px;
    list-style: none;
    margin: 0;
    padding: 7px 5px 0px 5px;
    border-width: 2px 2px 2px 0;
    border-color: #B7B7B7;
    border-style: solid;
}

#codetabs ul :first-child {
    border-radius: 10px 0 0 10px;
    border-left-width: 2px;
}
#codetabs ul :last-child {
    border-radius: 0 10px 10px 0;
}
#codetabs li:hover{
    background-color: grey;
}

http://jsfiddle.net/d09xgfzc/1/

CSS：在<li>悬停时更改背景，颜色不填充空间

2 个答案: