我想创建一个菜单，每当您将鼠标悬停在我的菜单中的“按钮”上时，它都会显示一些文本，但在 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;
}
因此，每当我将鼠标悬停在 anchor 类按钮(假设第一个按钮)的跨度上时，我想要一个文本框，它本质上是一个带有类 box_menu 到应用程序的跨度。那么我该怎么做呢？请帮忙。提前致谢。
最佳答案
实际上，您无法通过设置单个 <a> 的样式来实现这种效果使用您当前的 HTML，例如
.button:nth-child(1):hover + span {}
不会工作，因为它暗示 <span>是容器时链接的兄弟 <div>那是一个 sibling 。您显然可以让整个 <div> 的跨度文本出现在悬停时。但听起来你只需要一个或几个链接，如果你不介意这种行为，你可以使用
#menu:hover + .box_menu {}
关于html - css hover 想显示一个框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16201184/