CSS悬停在图像上 - 加载一个div [英] Css hover on image - load a div

问题描述

当我将鼠标悬停在图像上时，我想显示一个包含文本内容的div。

所以我想用这段代码做一些事情：

 < div id =image>< img src =image.png/>< / div> 
 
< div id =hover>测试讯息< / div> 
  

我试图隐藏悬停div在CSS显示和悬停我试图设置显示来阻止，但它不工作...... :(编辑：我想要的图片上的文字。当我把图片悬停时，它应该得到一些不透明的，但是文本不应该接受不透明！

是否有任何方法可以做到这一点？ 解决方案 div>

http://jsfiddle.net/ZSZQK/

  #hover {
 display：none; 
} 
 
 #image：hover + #hover {
 display：block; 
} 
  

保持简单，无需更改您的标记。

---

更新

如果你想改变鼠标悬停时的图像不透明度，那么
http://jsfiddle.net/ZSZQK/4/

  #hover {
 display：none; 
职位：亲属; 
 top：-25px; 
} 
 
 #image：hover {
 opacity：.7; 
} 
 
 #image：hover + #hover {
 display：block; 
} 
  

---

更新2

由于您在初始问题中添加了一些更多要求，现在它需要更改原始HTML标记。

我假设您正在使用 html5 ，如果是这样，您应该使用适合您的内容上下文的标签：

 < figure> 
< img src =http://placekitten.com/200/100/> 
< figcaption>测试讯息< / figcaption> 
< / figure> 
  

和css

  figure {
 position：relative; 
 display：inline-block; 
} 
 
 figcaption {
 display：none; 
位置：绝对; 
剩下：0; 
 bottom：5px; 
 right：0; 
 background-color：rgba（0,0,0，.15）; 
} 
 
图：hover img {
 opacity：.7; 
} 
 
 figure：hover figcaption {
 display：block; 
} 
  

jsFiddle

I would like to do a CSS effect on hovering an image.

I'd like to show a div containing content like text when I hover on an image.

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...:(

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?

解决方案

http://jsfiddle.net/ZSZQK/

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

#hover {
    display: none;
    position: relative;
    top: -25px;
}

#image:hover {
    opacity: .7;
}

#image:hover + #hover {
    display: block;
}

---

Update 2

Since you added a couple of more requirements to your initial question, now it requires a change in the original html markup.

I am assuming you are using html5, and if so, you should use the tags appropriated for your content's context:

<figure>
    <img src="http://placekitten.com/200/100" />
    <figcaption>Test message</figcaption>
</figure>

and the 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;
}

jsFiddle

这篇关于CSS悬停在图像上 - 加载一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！