html - 如何修复导航栏中的悬停仅突出显示元素的上半部分

问题描述

我的网站有很多我知道的缺陷，比如背景图片，除了最烦人的一个，我的悬停动画只突出了导航栏元素的上半部分。我希望悬停覆盖整个 div 而不仅仅是元素的上半部分。我很确定问题出在我如何集中我的元素我一点也不精通。非常感谢任何帮助。谢谢。

HTML：

<!DOCTYPE html>
<html lang="en">
<html>
<head>
    <link rel = "stylesheet" type = "text/css" href = "styles.css"/>
    <title>Newberry College</title>
</head>
<body>
    <div class = "header">
        <div class = "logo">
            <h1><a href = "#">Newberry College</a></h1>
        </div>
        <ul>
            <li><a = href = "#">About</a></li>
            <li><a = href = "#">School</a></li>
            <li><a = href = "#">Student</a></li>
            <li><a = href = "#">Resources</a></li>
        </ul>
    </div>
    <div id="background-img"></div>
</body>
</html>

CSS：

/*Removes default page formatting*/
*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: 'Raleway', 'Arial', 'serif'
}
#background-img {
    background: url(school.jpg);
    background-repeat: no-repeat;
    height: 100vh;
  }
/*Formats logo*/
.logo{
    width: 320px;
    background-color: #D50074;
    float: left;
    height: 100%;
}

.logo h1{
    font-size: 26px;
    text-transform: uppercase;
    padding: 35px 10px 0 10px;
}

.logo a{
    color: #3609BB;
}

/*Formats the header div*/
.header {
    width: 100%;
    height: 100px;
    display: block;
    background-color: #9c01A7;
}


/*Styles list*/
.header ul li{
    list-style: none;
}

/*Styles list elements*/
.header ul li a{
    padding: 40px 20px 0 0;
    float: right;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 600;
}

/*Styles link hover*/
.header ul li a:hover{
    background: #3609BB; 
    }

标签： htmlcss

从以下位置删除两个0s：

/*Styles list elements*/
.header ul li a{
    padding: 40px 20px 0 0; /* <--- here */

这与相同padding: 40px 20px 40px 20px，也可以。

html - 如何修复导航栏中的悬停仅突出显示元素的上半部分

问题描述

解决方案

推荐阅读