Html CSS 悬停在图像上 - 加载一个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15339182/
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
Css hover on image - load a div
提问by Taboo Loco
I would like to do a CSS effect on hovering an image.
我想对悬停图像进行 CSS 效果。
I'd like to show a div containing content like text when I hover on an image.
当我将鼠标悬停在图像上时，我想显示一个包含文本等内容的 div。
So I'd like to do something with this code:
所以我想用这段代码做一些事情：
<div id="image"><img src="image.png"/></div>
<div id="hover">Test message</div>
I have tried to hide the "hover" div in css display and on hover I tried to set the display to block, but its not working...:(
我试图在 css 显示中隐藏“悬停”div，在悬停时我试图将显示设置为阻止，但它不起作用...:(
EDIT: I want the text on the image. When I hover the image it should get some opacity BUT the text should not recieve that opacity!
编辑：我想要图像上的文字。当我悬停图像时，它应该有一些不透明度，但文本不应接收到这种不透明度！
IS there any method to do this?
有没有办法做到这一点？
回答by Jose Rui Santos
#hover {
display: none;
}
#image:hover + #hover {
display: block;
}
Just keep it simple, no need to change your markup.
保持简单，无需更改标记。
Update
更新
If you want to change opacity of image on mouse hover, then http://jsfiddle.net/ZSZQK/4/
如果您想在鼠标悬停时更改图像的不透明度，则 http://jsfiddle.net/ZSZQK/4/
#hover {
display: none;
position: relative;
top: -25px;
}
#image:hover {
opacity: .7;
}
#image:hover + #hover {
display: block;
}
Update 2
更新 2
Since you added a couple of more requirements to your initial question, now it requires a change in the original html markup.
由于您在最初的问题中添加了更多要求，现在需要更改原始 html 标记。
I am assuming you are using html5, and if so, you should use the tags appropriated for your content's context:
我假设您正在使用html5，如果是这样，您应该使用适合您内容上下文的标签：
<figure>
<img src="http://placekitten.com/200/100" />
<figcaption>Test message</figcaption>
</figure>
and the css
和 CSS
figure {
position: relative;
display: inline-block;
}
figcaption {
display: none;
position: absolute;
left: 0;
bottom: 5px;
right: 0;
background-color: rgba(0,0,0,.15);
}
figure:hover img {
opacity: .7;
}
figure:hover figcaption {
display: block;
}
回答by Salvatorelab
Try:
尝试：
<div id="image">
<img src="image.png"/>
<div class="hover">Test message</div>
</div>
CSS:
CSS：
#image {
position:relative;
}
#image .hover {
display:none;
position:absolute;
bottom:0;
}
#image:hover .hover {
display:block;
}
Basically what I did was:
基本上我所做的是：
- Moved text div inside
#imagediv. - Changed
id="hover"toclass="hover" - Added
display:blockwhen#imageis hovered anddisplay:noneif not. - Some positioning rules, it's just a fast example, let me know if it works.
- 在
#imagediv 中移动文本div。 - 改变
id="hover"以class="hover" - 添加
display:block何时#image悬停，display:none如果不悬停。 - 一些定位规则，这只是一个快速的例子，让我知道它是否有效。
回答by James King
There are so many ways to do this, but if you want a CSS only approach, you would need to restructure your html to something like:
有很多方法可以做到这一点，但如果你想要一个只使用 CSS 的方法，你需要将你的 html 重组为类似的内容：
<div id="image">
<img src="image.png"/>
<div id="hover">Test message</div>
</div>
And then in your CSS hide the message by default:
然后在你的 CSS 中默认隐藏消息：
#hover {display:none;}
Then show the message:
然后显示消息：
#image:hover #hover {display:block;}
回答by Atif Azad
here is the solution i found on google
这是我在谷歌上找到的解决方案
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
#mybox {
width:80px;
height:90px;
float:left;
background-color:#0F9;
padding:10px;
}
.Imgdiv {
width:80px;
height:20px;
margin:0px 0px 10px 0px; padding:0px;
cursor:pointer;
background-color:#39C;
}
#mybox .hiddenDiv {
left:0px;
display:none;
z-index:100;
width:80px;
height:50px;
margin:0px;
background-color:#336;
float:left;
}
#mybox:hover .hiddenDiv {
display:block; top:0px; left:8px;
}
</style>
<body>
<div id="mybox">
<div class="Imgdiv"></div>
<div class="hiddenDiv"></div>
</div>
</body>
</html>
回答by syd619
Hello If I understand correctly you want something like this:
你好如果我理解正确，你想要这样的东西：
<div id="wrapper">
<div id="img-wrapper">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSp7bY6nYWTDmFXKSlP4TdCe5ghVQhbt85tQMS8dfZMEGw7QOXiLA">
</div>
<div id="text-wrapper">
<p>Hello world!</p>
</div>
</div>
CSS:
CSS：
#wrapper{
position:relative;
border:1px solid black;
width:102px;
height:102px;
}
#text-wrapper{
position:absolute;
height:0px;
overflow:hidden;
font-size:14px;
font-family:Arial,Tahoma;
font-weight:bold;
transition: height 1s;
-moz-transition: height 1s; /* Firefox 4 */
-webkit-transition: height 1s; /* Safari and Chrome */
-o-transition: height 1s; /* Opera */
}
#img-wrapper:hover + #text-wrapper{
height:32px;
width:102px;
}
The key to accomplish this is this css line:
完成此操作的关键是此 css 行：
#img-wrapper:hover + #text-wrapper{
What it actually does is "When I hover img-wrapper div do some stuff in text-wrapper div"
它实际上做的是“当我将鼠标悬停在 img-wrapper div 中时，会在 text-wrapper div 中做一些事情”
Check demo here: http://jsfiddle.net/A9pNg/1/
在此处查看演示：http: //jsfiddle.net/A9pNg/1/
回答by Tbi45
Without JavaScript you can do like this :
没有 JavaScript，你可以这样做：
1.Make the #hoverdivbe on top of the image and set the opacity:0;
1.使#hoverdiv位于图像顶部并设置opacity:0;
2.Than add this to the css :
2.然后将其添加到 css 中：
#hover:hover {
opacity:1
}
This should resolve your problem.
这应该可以解决您的问题。
