2013-07-05 74 views
0

转到http://planetminecraft.com,当您查看链接时,您可以看到它们在连接受众的页面上时保持着色。保持a:人在页面上时处于活动状态?

我想做同样的事情,但黑色背景不影子。这是我的HTML和CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<link rel="stylesheet" href="style.css"> 
<title>Testing layouts</title> 
</head> 

<body> 

<div id="maincontainer"> 

<ul> 
    <li><a href="#servers">SERVERS</a></li> 
    <li><a href="#skins">SKINS</a></li> 
    <li><a href="#resource-packs">RESOURCE PACKS</a></li> 
    <li><a href="#builds">BUILDS</a></li> 
    <li><a href="#mods">MODS</a></li> 
    <li><a href="#forum">FORUM</a></li> 
</ul> 

Testing text Testing text Testing text Testing text Testing text 
Testing text Testing text Testing text Testing text Testing text 
Testing text Testing text Testing text Testing text Testing text 
Testing text Testing text Testing text Testing text Testing text 
Testing text Testing text Testing text Testing text Testing text 
Testing text Testing text Testing text Testing text Testing text 
Testing text Testing text Testing text Testing text Testing text 

</div> 

</body> 
</html> 

CSS

html, body { 
    height: 100%; 
    margin: 0; 
    background: #A3A3A3; 
    background-image: linear-gradient(180deg, #7D7D7D, #7D7D7D 50px, transparent 57px, transparent 140%); 
} 
#maincontainer { 
    min-height: 100%; 
    width: 960px; 
    min-width: 600px; 
    margin: auto; 
    border: ridge; 
    border-color: #919191; 
    border-top: 0; 
    border-bottom: 0; 
    background: rgba(255,255,255,0.35); 
    padding-left: 16px; 
    padding-right: 16px; 
} 

ul { 
list-style-type:none; 
margin:0; 
padding:0; 
overflow:hidden; 
padding-top: 6px; 
} 

li { 
float:left; 
margin-right: 12px; 
border: groove; 
border-width: 2px; 
border-color: #969696; 
} 

a { 
display:block; 
padding-left: 5px; 
padding-right: 5px; 
height: 38px; 
background-color:#7D7D7D; 
text-align: center; 
text-decoration: none; 
line-height: 37px; 
color: #EDEDED; 
font-weight: bold; 
font-family: impact; 
font-size: 1.8em; 
} 

li:hover { 
float:left; 
margin-right: 12px; 
border: ridge; 
border-width: 2px; 
border-color: #969696; 
} 

a:hover { 
color: white; 
} 

a:active { 
background-color: black; 
} 

你只需要看看一个a:hover a:active li li:hover ul

而且这可能与CSS还是需要的JavaScript。

回答

相关问题