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。