Question

我试图这样做，以便链接的整个长度改变背景颜色，但只有文本背后的背景。

html如下：

<DOCTYPE! HTML>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="dropdwn.css">
</head>

</body>

    <div class="dropdown">
        <h1><a href="#">Dropdown Box</a></h1>

            <ul class="content">
                <li><a href="#">List Item</a></li>
                <li><a href="#">List Item</a></li>
                <li><a href="#">List Item</a></li>
            </ul>

    </div>

</body>
</html>

CSS在下面，我已经尝试更改许多类的填充，但似乎无法得到它。感谢您提供任何有用的信息：）

body {
}

.dropdown {
    position: absolute;

}

.dropdown h1 {
    background-color: #62dbfc;
    font-family: "calibri light";
    padding: 15px 35px;
    margin: 0 auto;
    font-size: 36px;

}
.content {
    display: none;

}

.dropdown ul {
    margin: 0 auto;
    position: absolute;
    width: 100%;
    padding-left: 0;
}

.dropdown li {
    list-style-type: none;
    background-color: #ededed;
    margin: 0 auto;
    font-family: calibri;
    text-align: center;
    padding: 15px 0px;

}

.dropdown a {
    text-decoration: none;
    color: black;
    font-size: 36px;

}

.dropdown:hover .content {
    display: block;
}

.content a:hover {
    background-color: #c4c4c4; 

}

Answer 1

更改:hover附加的内容，并突出显示整个li元素。

.content li:hover {
    background-color: #c4c4c4; 

}

Answer 2

尝试改变＆＃34; li＆＃34;背景颜色而不是＆＃34; a＆＃34;。你可以使用JQuery

＆＃13;

$(".li_class").mouseover(function(){
  var color  = $(this).css("background-color");
  $(this).css("background", "#your color");
  $(this).mouseout(function(){
     $(this).css("background", color);
  }
}

＆＃13;

当滚动而不仅仅是文本时，如何使链接的整个背景发生变化？

2 个答案: