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。