0

转到http://planetminecraft.com，当您查看链接时，您可以看到当您在链接所指的页面上时它们保持阴影。

我想做同样的事情，但黑色背景不是阴影。这是我的 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;
}

您只需要查看 aa:hover a:active li li:hover ul

这也可以通过 CSS 实现还是需要 JavaScript。

4

1 回答 1

0

这是您正在寻找的解决方案。不需要 JS。

于 2013-07-05T22:53:11.100 回答