希望将3个div悬停在另一个div上时显示

Question

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

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

Answer 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);
})

Answer 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;
}

希望将3个div悬停在另一个div上时显示

问题描述

2 个解决方案

解决方案1
2 已采纳 2013-10-16 01:32:14

解决方案2
0 2013-10-16 01:40:06

希望将3个div悬停在另一个div上时显示

问题描述

2 个解决方案

解决方案1 2 已采纳 2013-10-16 01:32:14

解决方案2 0 2013-10-16 01:40:06

解决方案1
2 已采纳 2013-10-16 01:32:14

解决方案2
0 2013-10-16 01:40:06