jquery在hover时淡出淡出多个元素
我正在开发一个投资组合页面，并希望当用户将鼠标hover在项目上时，使用jquery在图像上淡入一些信息。
我对后端jquery的东西很新，所以刚开始弄脏我的手。
我已经设法让淡入淡出和单独的div元素工作，但我需要它为每一个独立工作。 我认为这需要一些更动态的代码，但我不知道从哪里开始。
如果你看下面我有一个适用于一个项目的代码。 将鼠标hover在第一张图像上时会出现div。 这是我需要的结构，因为真正的投资组合具有这种基本结构。 我只需要代码就可以让其他两个代码工作。 现场将有多个hover。
Robs Test 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; } $(function(){ $('#box').hover(over, out); }); function over(event) { $('#boxover').fadeIn(2000); $('#boxover').css("display","normal"); } function out(event) { $('#boxover').fadeOut(2000); } 
hello there rob 如果有人能告诉我如何使每个人独立工作那将是伟大的。
我猜一个像灯箱一样的rel属性？
我很高兴为每个图像分别设置一个id / rel。 我只是不想复制CSS。
希望有道理:)
好的，所以我已经更新了它但它仍然不起作用。 我可以看到发生了什么，但不确定使其正常工作的确切语法。
这是我的新代码：
Robs Test 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; } $(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); } 
hello there rob
我认为我几乎就在那里，因为伪逻辑是有道理的，但它仍然没有用。
干杯
抢
你去了： http ： //jsfiddle.net/Mm66A/13/
请不要使用ID字段来命名“box，box，box”，使用“box”类来表示每个项目都是“box”类型。 您可以为每个框提供唯一的ID。
在有效的html中，您不能有多个具有相同id元素。 将每个id更改为class并将jquery选择器从$('#box')和$('#boxover')更改$('.box')和$('.boxover') ，这应该对你$('.boxover') .. 。
第一：不要为你a所有s和div使用相同的id 。 id是元素的唯一标识符，对于元素的“组”，存在class属性。
要使相应的框显示/隐藏，请使用jquery的高级选择器，尝试获取直接位于hover元素之前的一个框。
你可以这样做：
hello there rob $(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 ）
根据您所定位的浏览器，您根本不需要jQuery 。 如果你必须针对IE并且不能立即改变而不是转换，你可以像其他海报提到的那样有条件地评论对Javascript的引用。
我会给每个标签一个唯一的ID，并给over box一个id为’over_’+ id_of_box_link并将id = box更改为class = box然后你可以通过这样做来应用hover：
你不能有重复的ID。
hello there rob $(".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); } );