导航列表a：悬停

我正在创建一个网站，到目前为止，“建设”下的导航栏。我想要它，所以当我将它悬停在上面时，整个nav ul li背景可以改变颜色，而不仅仅是文字背后的背景。我有这样的：导航列表a：悬停

<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; 
}

我该怎么办呢？

来源

2013-05-04 Zankonator

试试这个：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; 
}

来源

2013-05-04 15:04:11 mpora

你不能悬停在a改变.nav ul li，因为他们abscending。一个工作方法是使用Javascript。

我改变了宽度.nav，因为它是unlogic，标题是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; 
}

来源

2013-05-04 15:52:43

导航列表a：悬停

回答

相关问题