Question

我正在投资组合页面，并希望当用户将鼠标悬停在项目上时，使用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>

我认为我几乎就在那里，因为伪逻辑是有道理的，但它仍然没有用。

干杯

罗布

Answer 1

你走了： http://jsfiddle.net/Mm66A/13/

请不要使用ID字段来命名“框，框，框”，使用“框”类来表示每个项目都是“框”类型。您可以为每个框指定一个唯一ID。

Answer 2

在有效的html中，不能有多个具有相同id的元素。将每个id更改为class并将您的jquery选择器从$('#box')和$('#boxover')更改为$('.box')和$('.boxover')，这应该适合您。

Answer 3

首先：不要对所有id和a使用相同的div。 id是元素的唯一标识符，对于元素的“组”，存在class属性。

要获得相应的显示/隐藏框，请使用jquery的高级选择器，尝试获取直接位于悬停元素之前的一个框。

Answer 4

你可以这样做：

<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选择器以将选择限制为上下文（我使用{{1 }}）

Answer 5

根据您定位的浏览器，您don't need jQuery at all。如果你必须针对IE并且不能立即改变而不是转换，你可以有条件地评论对Javascript的引用，就像其他海报所提到的那样。

Answer 6

我会给每个标签一个唯一的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在悬停时淡出淡出多个元素

6 个答案: