Question

我正在创建一个网站，到目前为止它的导航栏位于“构建”下。我想要它，所以当我将鼠标悬停在它上面时，整个nav ul li背景会改变颜色，而不仅仅是文本背后的背景。我有这个：

<html>
<head>
    <link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
    <title>Landstown High School and Technology Academy - Home</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Sharepoint</a></li>
                <li><a href="#">Employees</a></li>
            </ul>
        </nav>
    </header>
    <section class="body">
</body>
</html>

这是CSS：

body
{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
background: #F8F8F8

}

/****HEADER STUFF****/

header
{
position: fixed;
height: 10%;
width: 200%;
background: #F8F8F8;
box-shadow: -10px 0px 10px #000;
}

nav
{
margin-right: 7%;
margin-left: 7%;
height: 40px;
}

nav a:hover
{
background: #00248F;
}

nav ul
{
width: 40%;
background: #0033CC;
line-height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px; 
}

nav ul li
{
display: inline;
padding: 8%;
}

nav ul li a:hover
{
text-decoration: none;
}

nav ul li a
{
color: #F8F8F8;
text-decoration: none;
}

nav ul li a:visited
{
text-decoration: none;
}

我该怎么做？

Answer 1

试试这个：http://jsfiddle.net/3BBe2/2/。我修改了你的代码。

新CSS：

    body
{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
background: #F8F8F8

}

/****HEADER STUFF****/

header
{
position: fixed;
height: 10%;
width: 200%;
background: #F8F8F8;
box-shadow: -10px 0px 10px #000;
}

nav
{
margin-right: 7%;
margin-left: 7%;
height: 40px;
}

nav ul a{
    padding:3px 3px;
}

/* nav li a:hover
{
    background: #00248F;
} */

nav ul
{
width: 60%;
background: #0033CC;
line-height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px; 
}

nav ul li
{
display: inline;
padding: 8%;
padding:5px 5px;
    padding:10px 12px 10px;
}

nav ul li:hover
{
    background: #00248F;

}

 nav ul li a
{
color: #F8F8F8;
text-decoration: none;

}

nav ul li a:visited
{
text-decoration: none;
}

Answer 2

您不能通过将鼠标悬停在.nav ul li上来更改a，因为它们是绝对的。使用Javascript的一种工作方法。

我已更改.nav的宽度，因为它是非逻辑的，标题宽度为200％，因此您无法正确居中.nav。

但无论如何，这对你有用：

<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<title>Landstown High School and Technology Academy - Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<script>
function change() {
document.getElementById("ul").style.backgroundColor="#bbb"; 
document.getElementById('nav').style.backgroundColor="#ccc";
document.getElementById('li').style.backgroundColor="#333";
document.getElementById('li2').style.backgroundColor="#333"; 
document.getElementById('li3').style.backgroundColor="#333"; 
document.getElementById('li4').style.backgroundColor="#333";  
}
function changeback() {
document.getElementById('nav').style.backgroundColor="#888";
document.getElementById("ul").style.backgroundColor="#0033CC"; 
document.getElementById('li').style.backgroundColor="#f00"; 
document.getElementById('li2').style.backgroundColor="#f00"; 
document.getElementById('li3').style.backgroundColor="#f00"; 
document.getElementById('li4').style.backgroundColor="#f00";  
}
</script>

    <header>
        <div id="nav">
            <ul id="ul">
                <li id="li"><a href="#" onmouseover="change()" onmouseout="changeback()">Home</a></li>
                <li id="li2"><a href="#" onmouseover="change()" onmouseout="changeback()">Contact Us</a></li>
                <li id="li3"><a href="#" onmouseover="change()" onmouseout="changeback()">Sharepoint</a></li>
                <li id="li4"><a href="#" onmouseover="change()" onmouseout="changeback()">Employees</a></li>
            </ul>
        </div>
    </header>
    <section class="body">
</body>
</html>

CSS：

body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans', sans-serif;
    background: #F8F8F8;
}

/****HEADER STUFF****/
header {
    position: fixed;
    height: 10%;
    width: 100%;
    background: #F8F8F8;
    box-shadow: -10px 0 10px #000;
}

#nav ul {
    width: 70%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    line-height: 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #03C;
}

#nav li {
    display: inline;
    padding: 0 8%;
    background: red;
}

#nav a {
    color: #F8F8F8;
    text-decoration: none;
}

#nav a:visited {
    text-decoration: none;
}

导航列表a：悬停

2 个答案: