13

将鼠标悬停在 DIV 上时是否可以显示内容。看图片

当我将鼠标悬停在 div 上时，会发生过渡，但是是否可以在悬停的 div 内显示内容，即。图片等

html：

<div class="flowingdown">

</div>

CSS3：

.flowingdown {
    width:1045px;
    background-image:url(images/vertical_cloth.png);
    height:50px;
    float:left;
    margin-top:2px;
    margin-bottom:2px;
    border-radius:0 0  55px 55px ;
    transition: height 1s;
    -webkit-transition: height 1s;


}

.flowingdown:hover {
    height:100px;
}
4

4 回答 4

29

假设您有以下标记：

<div id="parent">
    Some content
    <div id="hover-content">
        Only show this when hovering parent
    </div>
</div>

CSS：

#hover-content {
    display:none;
}
#parent:hover #hover-content {
    display:block;
}

这应该可以解决问题。

不知道你会如何使用转换，但你至少必须放置相同的选择器。

例子

于 2013-07-25T13:12:34.497 回答
3

如果说，你有这个上下文：

<div class="flowingdown">
    <div class="something-inside">
        something-inside
    </div>
    <div class="something-inside-but-hidden">
        something-inside-but-hidden
    </div>
</div>

CSS

.something-inside-but-hidden {display:none}
.flowingdown:hover .something-inside-but-hidden {display:block}

工作示例jsFiddled here

于 2013-07-25T13:11:46.333 回答
0

对的，这是可能的。

但是将你的包装.flowingdown在一个 div 中。为了展示全部内容，

<div style="width: 200px; height:300px;">
    <div class="flowingdown"></div>
</div>

CSS： 

.flowingdown {
    width:1045px;
    background-image:url(http://i.imgur.com/hHUa9Ty.jpg);
    height:50px;
    float:left;
    margin-top:2px;
    margin-bottom:2px;
    border-radius:0 0 55px 55px;
    transition: height 1s;
    -webkit-transition: height 1s;
}
.flowingdown:hover {
    height:100%; //Inorder to show the entire content within the parent.
}

检查这个JSFiddle

于 2013-07-25T13:15:35.120 回答
0

我假设您正在尝试隐藏背景图像的下半部分，但我刚刚测试了这个确切的代码并且它工作正常：

<html>
<head>
<style>

.flowingdown {
    width:1045px;
    background-image:url(../Pictures/C_2560x1400.jpg);
    height:50px;
    float:left;
    margin-top:2px;
    margin-bottom:2px;
    border-radius:0 0  55px 55px ;
    transition: height 1s;
    -webkit-transition: height 1s;


}

.flowingdown:hover {
    height:100px;
}
</style>
</head>
<body>

<div class="flowingdown">

</div>

</body>

这与您使用的代码完全相同，只是我使用了自己的图像。

如果您想要更改悬停时的背景图像，您的 CSS 应该是：

.flowingdown:hover {
    height:100px;
    background-image:url(path.jpg);
}

如果我误解了你的问题，请告诉我。

于 2013-07-25T13:26:15.787 回答