jQuery淡入淡出悬停多个元素
[英]jquery fade in fade out on hover for multiple elements
问题描述
我正在投资组合页面上，当用户将鼠标悬停在项目上时，我想使用jquery在图像上淡入一些信息。
我对后端jquery东西很陌生，所以刚开始使我的手变得肮脏。
我设法淡入和淡出以处理单个div元素，但是我需要它针对每个元素独立工作。 我认为这需要更多动态代码，但是我不确定从哪里开始。
如果您在下面看，我有适用于一项的代码。 将鼠标悬停在第一张图像上时，将显示div。 这是我需要的结构，因为真正的投资组合具有此基本结构。 我只需要代码即可使其在其他两个代码上正常工作。 实时站点中将有多个悬停指针。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<title>Robs Test</title>
<style>
body{background:gray;}
div{position:relative;}
#box{
position:relative;
width:150px;
height:150px;
float:left;
display:block;
background:black;
margin-right:20px;
}
#boxover{
position:absolute;
top:10px;
left:0px;
width:100%;
height:20px;
z-index:100;
background:white;
display:none;
}
</style>
<script type="text/javascript">
$(function(){
$('#box').hover(over, out);
});
function over(event)
{
$('#boxover').fadeIn(2000);
$('#boxover').css("display","normal");
}
function out(event)
{
$('#boxover').fadeOut(2000);
}
</script>
</head>
<body>
<a href="#" id="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="boxover">hello</div></a>
<a href="#" id="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="boxover">there</div></a>
<a href="#" id="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="boxover">rob</div></a>
</body>
</html>
如果有人可以告诉我如何使每个人独立工作，那将是很好的。
我猜像灯箱的rel属性？
我很乐意为每个图片提供单独的id / rel。 我只是不想复制CSS。
希望有道理:)
好的，所以我已经更新了它，但是仍然无法正常工作。 我可以看到发生了什么，但是不确定要使其工作的确切语法。
这是我的新代码：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<title>Robs Test</title>
<style>
body{background:gray;}
div{position:relative;}
.box{
position:relative;
width:150px;
height:150px;
float:left;
display:block;
background:black;
margin-right:20px;
}
.boxover{
position:absolute;
top:10px;
left:0px;
width:100%;
height:20px;
z-index:100;
background:white;
display:none;
}
</style>
<script type="text/javascript">
$(function(){
$('.box').hover(over, out);
});
function over(event){
var over_id = '#box_over_' + $(this).attr('id').replace('over_','');
$(over_id).fadeIn(2000);
},
function out(event) {
var over_id = '#box_over_' + $(this).attr('id').replace('over_','');
$(over_id).fadeOut(2000);
}
</script>
</head>
<body>
<a href="#" class="box" id="over_1"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_1" class="boxover">hello</div></a>
<a href="#" class="box" id="over_2"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_2" class="boxover">there</div></a>
<a href="#" class="box" id="over_3"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_3" class="boxover">rob</div></a>
</body>
</html>
我认为我快到了，因为伪逻辑很有意义，但是它仍然无法正常工作。
干杯
抢
6 个解决方案
解决方案1
4 2011-12-20 16:19:30
在这里，您可以： http : //jsfiddle.net/Mm66A/13/
请不要使用ID字段来命名“ box，box，box”，使用“ box”类表示每个项目都是“ box”类型。 您可以为每个框指定一个唯一ID。
解决方案2
0 2011-12-20 16:08:32
在有效的html中，不能有多个具有相同id元素。 将每个id更改为class并将您的jquery选择器从$('#box')和$('#boxover')更改$('.box')和$('.boxover') ，这应该对您$('.boxover') 。 。
解决方案3
0 2011-12-20 16:10:03
第一：不要使用相同的id为所有的a S和div秒。 id是元素的唯一标识符，对于元素的“组”，有class属性。
要显示/隐藏相应的框，请使用jquery的高级选择器，尝试获取一个位于悬停元素前的框。
解决方案4
0 2011-12-20 16:10:06
您可以这样做：
<a href="#" class="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div class="boxover">hello</div></a>
<a href="#" class="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div class="boxover">there</div></a>
<a href="#" class="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div class="boxover">rob</div></a>
$(function() {
$('.box').hover(over, out);
});
function over(event) {
$('.boxover', this).fadeIn(2000);
$('.boxover', this).css("display", "normal");
}
function out(event) {
$('.boxover', this).fadeOut(2000);
}
在这里摆弄http://jsfiddle.net/rynma/
基本上，您必须使用classes而不是ids因为id必须是唯一的，并且您将context传递给jquery选择器以将选择限制为上下文（我使用this ）
解决方案5
0 2011-12-20 16:10:51
完全不需要jQuery，这取决于您要定位的浏览器。 如果您必须以IE为目标，并且不能立即进行更改而不是进行过渡，则可以像其他海报所提到的那样，有条件地对此Javascript进行注释。
解决方案6
0 2011-12-20 16:13:58
我会给每个标签一个唯一的ID，并给over box一个id为“ over _” + id_of_box_link，然后将id = box更改为class = box，然后您可以通过以下操作应用悬停功能：
您不能有重复的ID。
<a href="javascript:void(0)" class="box" id="over_1"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="box_over_1">hello</div></a>
<a href="javascript:void(0)" class="box" id="over_2"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="box_over_2">there</div></a>
<a href="javascript:void(0)" class="box" id="over_3"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="box_over_3">rob</div></a>
$(".box").hover(
function () {
var over_id = '#box_over_' + $(this).attr('id').replace('over_','');
$(over_id).fadeIn(2000);
},
function () {
var over_id = '#box_over_' + $(this).attr('id').replace('over_','');
$(over_id).fadeOut(2000);
}
);
在jQuery中使用悬停淡入和淡出元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.