Show content when hovering over DIV

Is it possible to show content when hovering over the DIV. See Image

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

When I hover over the div, the transition takes place, but is it possible to show content inside the hovering div, ie. Images etc

当我将鼠标悬停在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 个解决方案

#1

Assume you have the following markup:

假设您有以下标记:

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

The CSS:

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

This should do the trick.

这应该可以解决问题。

Not sure how you'd do it with transitions, but you'd have to put the same selector at least.

不知道你如何使用过渡,但你必须至少放置相同的选择器。

Example

#2

If, per say, you have this context :

如果,你说,你有这样的背景:

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

Working example jsFiddled here

工作示例jsFiddled here

#3

Yes, it is possible.

对的,这是可能的。

But wrap your .flowingdown within a div. Inorder to show the entire content,

但是将你的.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.
}

Check this JSFiddle

检查这个JSFiddle

#4

I assume you are trying to hide the bottom half of the background-image, but I just tested this exact code and it worked fine:

我假设你试图隐藏背景图像的下半部分,但我只是测试了这个确切的代码并且它工作正常:

<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>

That's the same exact code you used, except I used an image of my own.

这与您使用的完全相同的代码,除了我使用了我自己的图像。

If what you want is to change the background image on hover, your CSS should be:

如果你想要的是在悬停时改变背景图像,你的CSS应该是:

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

Let me know if I misunderstood your question.

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

#1