我有一个问题。我需要在消除跨度框内的链接，只有当是悬停的文本，跨度框才会显示。
有HTML:
<a class="spanbox-trigger" href="#">some private data</a>
<span class=spanbox><a href="#">good data 1</a></span>
<span class=spanbox><a href="#">good data 2</a></span>
<span class=spanbox><a href="#">good data 3</a></span>
有CSS:
span.spanbox {
display: none;
}
a.spanbox-trigger:hover {
display: block;
background: #ffffff;
border: 2px solid #000000;
}
span.spanbox:hover {
display: block;
background: #ffffff;
border: 2px solid #000000;
}
还是我，抱歉，整个HTML都在这里:
<!DOCTYPE html>
<html>
<head>
<title>Privatedata</title>
<link type="text/css" rel="stylesheet" href="Css/styl.css"/>
</head>
<body>
<a class="spanbox-trigger" href="#">some private data</a><br>
<span class=spanbox><a href="#">good data 1</a></span><br>
<span class=spanbox><a href="#">good data 2</a></span> <br>
<span class=spanbox><a href="#">good data 3</a></span>
</body>
</html>
如果您不想使用Javascript，或者您可以使用这种方式，但是您只能显示第一行
<html>
<head>
<title>Page Title</title>
<style>
.spanbox {
display: none;
}
.spanbox-trigger:hover + .spanbox{
display: block;
background: #ffffff;
color:#000;
border: 2px solid #000000;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<a class="spanbox-trigger" href="#">some private data</a>
<span class=spanbox><a href="#">good data 1</a></span>
<span class=spanbox><a href="#">good data 2</a></span>
<span class=spanbox><a href="#">good data 3</a></span>
</body>
</html>
或者更好的方式，我认为是这样的:
<html>
<head>
<title>Page Title</title>
<style>
.spanbox {
display: none;
}
.top-test:hover .spanbox{
display: block;
background: #ffffff;
color:#000;
border: 2px solid #000000;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<div class="top-test"><a class="spanbox-trigger" href="#">some private data</a>
<span class=spanbox><a href="#">good data 1</a></span>
<span class=spanbox><a href="#">good data 2</a></span>
<span class=spanbox><a href="#">good data 3</a></span>
</div>
</body>
</html>
问候
