Question

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

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

这也可以用CSS或者它需要JavaScript。

Answer 1

以下是您要找的solution。不需要JS。

保持一个：当人在页面上时激活吗？

1 个答案: