我正在开发一个投资组合页面，并且希望使用 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>
如果有人可以向我展示如何让每个人独立工作，那就太好了。
我猜有像 lightbox 这样的 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>
我想我已经快到了，因为伪逻辑是有道理的，但它仍然不起作用。
干杯
抢
最佳答案
给你: http://jsfiddle.net/Mm66A/13/
请不要使用 ID 字段来命名事物“box,box,box”，使用“box”的类来表示每个项目的类型为“box”。您可以为每个盒子指定一个唯一的 ID。
关于jquery 多个元素悬停时淡入淡出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8578307/