[英]Div wont remain expanded when I hover over it
So I'm designing this graphic heavy website and I wanted to have this box display when you hover over the image that tells you more about the image you're looking at, with a link if you wanted more information. 因此,我正在设计一个图形复杂的网站,当您将鼠标悬停在图像上时,希望显示该框,该框可以告诉您更多有关正在查看的图像的信息,并带有链接(如果需要更多信息)。 I just realized that when you move your mouse to this new div, it collapses.
我只是意识到,当您将鼠标移到这个新的div时,它会崩溃。 I don't understand why, or how to make it stop.
我不明白为什么,或如何使其停止。
Give your wrapping <div>
a class like in this fiddle . 给包裹您的
<div>
一个像这个小提琴一样的类。
The key is this css style: 关键是这种CSS样式:
.wrapper:hover #b-image-info {
display: block;
}
UPDATE 更新
This should help: 这应该有助于:
.wrapper:hover * { display:none;}
.warpper:hover #b-image, .warpper:hover #b-image-info { display: block; }
Well just in case you want to do with js/jquery. 好吧,以防万一您想使用js / jquery。 You could do something like this.
你可以做这样的事情。 When hovered get the image info and change its display property.
悬停时,获取图像信息并更改其显示属性。
$("#b-image").hover(function(){
$("#b-image-info").css("display", "block");
}, function(){
//nothing
});
http://jsfiddle.net/btevfik/jq3xkm6y/ http://jsfiddle.net/btevfik/jq3xkm6y/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.