Question

当您将光标悬停在div display:上时，我想将div none中的block从drop更改为menu。我尝试过使用字符+，~，>，.和空格。我还尝试将id与class es，id s与id s和class es与class es一起使用。这是

的代码

CSS 和 HTML

#menu ol li:hover{
   		color:yellow;
}
#menu ol{
   		list-style:none;
   		background-color:black;
   		color:#11B594;
   		padding:5px;
   		width:40px;
   		height:20px;
   		text-decoration:none;
   		display:block;
   		margin:left;
   		position:top;
   		padding-top:5px;
}
#drop ul{
   		list-style:none;
   		background-color:grey;
   		padding:5px;
   		width:120px;
   		height:60px;
   		text-decoration:none;
   		display:none;
   		position:absolute;
   		padding-top:5px;
  		top:0px;
   		left:55px;
}
#drop ul li:hover{
  		background-color:#1DE5FC;
   		padding:5px;
   	}
#menu ol li:hover .drop ul{
   		display:block;
}

<!DOCTYPE HTML>
<html lang="en"> 
	<head>
		<link type="text/css" rel="stylesheet" href="css.css"/>
		<title>
			Main page
		</title>
	</head>
	<body>
		<div id="menu">
			<ol>
				<li>
					<b>
						Menu
					</b>
				</li>
			</ol>
		</div>
		<div id="drop">
			<ul>
				<li>
					<a href="#.html" >#</a>
				</li>
			</ul>
		</div>
	</body>
</html>

Answer 1

当您将鼠标悬停在#menu (#menu:hover)上时，您需要指明adjacent sibling #drop ul可见display:block;。

此外，为了避免任何“跳跃”，您还需要在将鼠标悬停在#drop ul上时指定相同的规则。

#menu:hover + #drop ul,
#drop ul:hover {
  display:block;
}

#menu ol li:hover
	{
		color:yellow;
	}
#menu ol
	{
		list-style:none;
		background-color:black;
		color:#11B594;
		padding:5px;
		width:40px;
		height:20px;
		text-decoration:none;
		display:block;
		margin:left;
		position:top;
		padding-top:5px;
	}
#drop ul
	{
		list-style:none;
		background-color:grey;
		padding:5px;
		width:120px;
		height:60px;
		text-decoration:none;
		display:none;
		position:absolute;
		padding-top:5px;
		top:0px;
		left:55px;
	}
#drop ul li:hover
	{
		background-color:#1DE5FC;
		padding:5px;
	}
#menu:hover + #drop ul,
    #drop ul:hover {
      display:block;
    }

<!DOCTYPE HTML>
<html lang="en"> 
	<head>
		<link type="text/css" rel="stylesheet" href="css.css"/>
		<title>
			Main page
		</title>
	</head>
	<body>
		<div id="menu">
			<ol>
				<li>
					<b>
						Menu
					</b>
				</li>
			</ol>
		</div>
		<div id="drop">
			<ul>
				<li>
					<a href="#.html" >#</a>
				</li>
			</ul>
		</div>
	</body>
</html>

如何使用Css修改另一个div的div

1 个答案: