希望在悬停在另一个 div 上时出现 3 个 div答案

【问题标题】：want 3 divs to appear when hovering over another希望在悬停在另一个 div 上时出现 3 个 div
【发布时间】：2013-10-23 23:38:12
【问题描述】：

到目前为止，这是我的代码。

<!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 等标题居中时，文本仍停留在左侧。我的另一个小困境。

【问题讨论】：

第一件事 - 将您的 HTML 标签放在 <head> 上方。

标签： css html hover

【解决方案1】：

此效果可以通过两种方式实现：通过纯 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。
在死者选择器中，将内部 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);
})

【讨论】：

谢谢你。这正是我想要的。非常感谢！

【解决方案2】：

这是一个指向 JSFiddle 的链接，它应该可以满足您的需求：http://jsfiddle.net/MP8vE/

这是最相关的 CSS：

#a {
    width:33%;
    height:50px;
    background-color: white;
    display:none;
    float:left;
}
#b {
    width:33%;
    height:50px;
    background-color: blue;
    display:none;
    float:left;
}
#c {
    width:33%;
    height:50px;
    background-color: yellow;
    display:none;
    float:left;
}
.two:hover div {
    vertical-align:middle;
    display:inline-block !important;
}

【讨论】：