到目前为止，这是我的代码。
<!DOCTYPE html>
<head>
<title>An MSU Soiree</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<html>
<body>
<div id="one"> <h2 id="h1"> An MSU Soiree</h2> </div>
<div id="two"> <h2 id="2h"> Campus</h2>
<div id="a"> </div>
<div id="b"> </div>
<div id="c"> </div>
</div>
</body>
</html>
还有我的一些 css....它会重复所以没关系。
#2h
{
font-family:Courier;
text color:white;
text-align: center;
}
#two
{
width:100%;
height:80px;
background-color:#FF0056;
}
#a
{
width:50px;
height:50px;
background-color: white;
}
#b
{
width:50px;
height:50px;
background-color: white;
}
#c
{
width:50px;
height:50px;
background-color: white;
}
#two:hover
{
height:225px;
background-color:#FF0056;
}
#two: hover div #a, #b, #c
{
display:inline-block;
}
如您所见，没有悬停时，框宽度为 100%，高度为 80。悬停时，高度为 225，宽度为 100%。 但是当悬停时，我希望 3 个 div 出现在悬停的 div 中，水平平均分割，并在高度上居中。
创造这种幻想需要进行哪些调整哈哈？
另外，当我尝试将诸如 #2h 的标题居中时，文本仍然位于左侧。我的另一个小困境。
最佳答案
这种效果可以通过两种方式实现:通过纯 CSS 或使用 JavaScript。
纯 CSS 方法
- 将每个内部 div(#a、#b 和 #c)设置为
display: none;。这将使 div 默认隐藏(当用户未将鼠标悬停在父 div 上时 (#two))。 - 为悬停效果创建一个后代选择器。它看起来像这样:
#two:hover #a, #two:hover #b, #two:hover #c {}。仅当用户将鼠标悬停在#two 上时，此规则才应用于#a、#b 和#c div。 - 在 decedent 选择器内，将内部 div 设置为
display: inline-block;。
看看这个简单的例子(它当然需要一些修饰，但你可以看到悬停时出现三个内部 div):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#a {
display: none;
background-color: red;
width: 30%;
}
#b {
display: none;
background-color: blue;
width: 30%;
}
#c {
display: none;
background-color: yellow;
width: 30%;
}
#two {
background-color: #666;
border: 3px solid black;
width: 100%;
}
#two:hover #a, #two:hover #b, #two:hover #c {
display: inline-block;
}
</style>
</head>
<body>
<div id="two"> <h2 id="2h"> Campus</h2>
<div id="a">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div id="b">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div id="c">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
</div>
</body>
</html>
现在，这种方法很好，因为它使用纯 CSS，但缺点是没有动画。
jQuery 方法
因此三个内部div的出现有点突兀。您可以使用 JavaScript(或者更好的 jQuery)为内部 div 的外观设置动画。为悬停效果设置动画的 jQuery 脚本的一个非常简单的示例可能如下所示:
$("#two").hover(function() {
$("#a").fadeIn(250);
$("#b").fadeIn(250);
$("#c").fadeIn(250);
}, function() {
$("#a").fadeOut(250);
$("#b").fadeOut(250);
$("#c").fadeOut(250);
})
关于css - 将鼠标悬停在另一个上时希望出现 3 个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19393546/