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％宽度。但是当我盘旋时，我希望在悬停的div中出现3个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

2 个答案: