Javascript Jquery:在图像悬停时隐藏并显示div
我想知道是否有人可以帮我找到一个解决方案,在我的博客中的图像悬停的效果。 我的想法是,当我悬停在图像上时,您会看到一个div,其中包含图像信息、链接项目名称、日期等 我所做的是,分配两个类来处理div信息,classJavascript Jquery:在图像悬停时隐藏并显示div,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我想知道是否有人可以帮我找到一个解决方案,在我的博客中的图像悬停的效果。 我的想法是,当我悬停在图像上时,您会看到一个div,其中包含图像信息、链接项目名称、日期等 我所做的是,分配两个类来处理div信息,classshow和classhide,并且在开始时它与classhide一起显示 然后在img:hover时使用jQuery/JavaScript删除类hide并添加类show 问题是,当我悬停在一个图像上时,会出现所有图像的信息 我想知道是否有人可以帮助我使刚刚出现的鼠标悬停的图像信息 我
show
和classhide
,并且在开始时它与classhide
一起显示
然后在img:hover
时使用jQuery/JavaScript删除类hide
并添加类show
问题是,当我悬停在一个图像上时,会出现所有图像的信息
我想知道是否有人可以帮助我使刚刚出现的鼠标悬停的图像信息
我的HTML:
<div id="content">
<img src="images/1.jpg" alt="Projecto 1" height="290" width="220" />
<div class="information hide">
<h2>Titulo</h2>
<p>Lorem Ipsun</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div id="content">
<img src="images/1.jpg" alt="Projecto 1" height="290" width="220" />
<div class="information hide">
<h2>Titulo</h2>
<p>Lorem Ipsun</p>
<a href="#" class="info">Read More</a>
</div>
</div>
body div.information {
background: rgba(219, 49, 49, 0.52);
width: 220px;
height: 290px;
position: relative;
top: -290px;
}
$('img').hover(function() {
$('.information').addClass("mostrar");
$('.information').removeClass("hide");
});
/*悬停效应*/
.hide {
display: none;
}
.show {
display: block;
}
我的JavaScript:
<div id="content">
<img src="images/1.jpg" alt="Projecto 1" height="290" width="220" />
<div class="information hide">
<h2>Titulo</h2>
<p>Lorem Ipsun</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div id="content">
<img src="images/1.jpg" alt="Projecto 1" height="290" width="220" />
<div class="information hide">
<h2>Titulo</h2>
<p>Lorem Ipsun</p>
<a href="#" class="info">Read More</a>
</div>
</div>
body div.information {
background: rgba(219, 49, 49, 0.52);
width: 220px;
height: 290px;
position: relative;
top: -290px;
}
$('img').hover(function() {
$('.information').addClass("mostrar");
$('.information').removeClass("hide");
});
顺便说一下,如果有人能告诉我,当图像不悬停时,如何再次隐藏信息,我很感激
问题是,当我悬停在一个图像上时,会出现所有图像的信息
我相信这是因为您引用的是泛型信息类,而不是单个div的id。相反,使用相邻的同级引用仅获取您悬停的图像的信息。您可以使用:nth-child()选择器
$("#content:nth-child(1)")
此外,您不应该有多个具有相同id的div
$(this).parent().find('.information').addClass("mostrar")
.removeClass("hide");
这将抓取悬停的单个img的父项,在父项中搜索并找到特定于该img的。信息。尝试以下操作:
$('img').hover(function(){
$(this).siblings('.information').removeClass('hide').addClass('mostrar').addClass('show');
}, function(){
$(this).siblings('.information').removeClass('show').removeClass('mostrar').addClass('hide');
});
简单一点怎么样:
$("div.content > img").hover(function() {
$(this).next(".information").show(); //hover in
}, function() {
$(this).next(".information").hide(); //hover out
});
这样,使用jquery.show和.hide就不需要使用为悬停效果创建的css,因为这些jquery函数已经处理了属性。试试这个
$('img').hover(function() {
$('.information').addClass("hide")
$(this).next().addClass("mostrar").removeClass("hide");
}, function(){
$('.information').addClass("hide").removeClass("mostrar")
});
如果您不需要支持IE7及更低版本,则只需使用选择器使用CSS即可实现,无需使用JavaScript:
img + div.information {
display: none;
}
img:hover + div.information {
display: block;
}
也就是说:“在img
之后立即隐藏div.information
”,但“在悬停img
之后立即显示div.information
”。后一个规则在CSS中更晚,而且(我认为)更具体,它在图像悬停时获胜,而不是在图像未悬停时获胜
-适用于现代浏览器,包括IE8和更高版本