1

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

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

4

2 回答 2

2

这种效果可以通过两种方式实现：通过纯 CSS 或使用 JavaScript。

纯 CSS 方法

  1. 将每个内部 div（#a、#b 和 #c）设置为display: none;. 这将使 div 默认隐藏（当用户未将鼠标悬停在父 div 上时（#two）。
  2. 为悬停效果创建一个死者选择器。它看起来像这样#two:hover #a, #two:hover #b, #two:hover #c {}：仅当用户将鼠标悬停在#two 上时，此规则才会应用于#a、#b 和#c div。
  3. 在死者选择器中，将内部 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);
})
于 2013-10-16T01:32:14.350 回答
0

这是一个 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;
}
于 2013-10-16T01:40:06.697 回答