Html 将鼠标悬停在 DIV 上时显示内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17858928/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show content when hovering over DIV
提问by Farhan Afzal
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 :
html :
<div class="flowingdown">
</div>
CSS3 :
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;
}
回答by Anpan
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:
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.
不知道你会如何处理过渡，但你至少必须放置相同的选择器。
回答by Milche Patern
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
CSS
.something-inside-but-hidden {display:none}
.flowingdown:hover .something-inside-but-hidden {display:block}
Working example jsFiddled here
工作示例jsFiddled here
回答by Praveen
Yes, it is possible.
对的，这是可能的。
But wrap your .flowingdownwithin a div. Inorder to show the entire content,
但是将您的内容包裹.flowingdown在一个 div 中。为了显示全部内容，
<div style="width: 200px; height:300px;">
<div class="flowingdown"></div>
</div>
CSS:
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
回答by Jacques ジャック
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.
如果我误解了您的问题，请告诉我。
