css hover想要显示一个框答案

【问题标题】：css hover want to display a boxcss hover想要显示一个框
【发布时间】：2013-04-18 13:07:26
【问题描述】：

我想创建一个菜单，当您将鼠标悬停在菜单中的“按钮”上时，它会显示一些文本，但在 css 中执行时会出现问题。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type = "text/css" rel = "stylesheet" href = "home.css"/>

</head>

<body>
<div id = "menu">

<a class = "button"><span>222</span></a>
<a class = "button"><span>222</span></a>
<a class = "button"><span>222</span></a>
<a class = "button"><span>222</span></a>
<a class = "button"><span>222</span></a>
<a class = "button"><span>222</span></a>
<a class = "button"><span>222</span></a>
<a class = "button"><span>222</span></a>

</div>
<span class = "box_menu"><p>asfqwqs</p></span>



</body>
</html>

css

#menu {
width:70%;
height:35px;
margin:0 auto;
border-radius:0px 0px 3px 3px;
box-shadow:1px 2px 3px 2px #1F0000;
}
body{
background-color:#562500;
background:url('image_for_website.jpg') repeat;
}

a.button{
display:inline;
position:relative;
font-size:12px;
font-family:"Comic Sans MS", cursive, sans-serif;
color:white;
height:26px;


}
a.button span {
display: block;
line-height: 30px;
border-right:1px solid rgb(0,0,0);
float:left;
width:10%;
padding:3px;
} 
a.button:hover span{
background:rgba(0,0,0,0.3);
cursor: pointer;
}
a.box_menu{
position:absolute;
display:none;
width:20px;
border:1px solid #333333;
color:white;
font-size:12px;
font-family:"Comic Sans MS", cursive, sans-serif;
background:rgba(2,2,2,0.7);
margin-top:18%;
margin-left:15%;
border:1px solid white;
}
a.box_menu:hover span{
display:block;
}

所以，每当我将鼠标悬停在锚类按钮的跨度上时（比如说第一个），我想要一个文本框，它本质上是一个带有 box_menu 类的跨度到 apper。那么我该怎么做呢？请帮忙。提前谢谢。

【问题讨论】：

标签： html css hover

【解决方案1】：

实际上，您无法通过使用当前 HTML 设置单个 <a> 的样式来实现这种效果，例如

.button:nth-child(1):hover + span {}

不起作用，因为它暗示 <span> 是链接的同级，而容器 <div> 是同级。您显然可以让整个 <div> 悬停时出现跨度文本，但听起来您只希望一个或几个链接使用它，如果您不介意这种行为，您可以使用

#menu:hover + .box_menu {}

http://jsfiddle.net/RtK7M/

【讨论】：

如果我想在悬停时显示它，例如带有一些 id 的元素，我该如何更改呢？
一种方法是#menu:hover + #idhere {} 或者你的意思是不同的？
好吧，我的意思是，当您悬停在 1 个特定按钮时（这就是为什么我要用 id 指定它），我希望这个框出现，另一个按钮 - 另一个框等等。
另一件事是，当我尝试将鼠标悬停在弹出框上时，它消失了，我希望它被留下
你必须改变你的 HTML - 唯一可行的方法是如果你删除包含 <div> .. 因为你不能用 CSS “回溯” DOM，不选择器存在。