当前位置： 文江博客话题详情

jquery 多个元素悬停时淡入淡出

发布于 2024-12-22 03:55:59 字数 3534 浏览 2 评论 0原文

我正在开发一个投资组合页面，并且想使用 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>

我想我已经快到了，因为伪逻辑是有意义的，但它仍然不起作用。

干杯

罗布

原文

I am working on a portfolio page and would like to use jquery to fade in some information over the image when the user hovers over the item.

I am quite new to back-end jquery stuff so just starting to get my hands dirty.

I have managed to get the fade in and out to work on a singular div element, but I need it to work independently for each one. I assume this requires some kind more dynamic code, but I'm not sure where to start.

If you look below I have the code which works for one item. The div appears when you hover over the first image. This is the structure I need as the real portfolio has this basic structure. I just need the code to get it working for the other two. There will be multiple hover overs in the live site.

<!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>

If someone could show me how to make each one work independently that would be great.

I'm guessing a rel attribute like lightbox?

I'm happy to give each image a separate id/rel. I just don't want to replicate the css.

Hope that makes sense :)

OK, so I have updated it but it still doesn't work. I can see what is going on, but not sure the exact syntax to get it working.

Here is my new code:

<!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>

I think I'm nearly there as the pseudo logic makes sense, but it's still not working.

Cheers

Rob

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（6）

乖乖哒 2024-12-29 03:55:59

干得好：
http://jsfiddle.net/Mm66A/13/

请不要使用 ID 字段来命名事物“box,box,box”，使用“box”的类来表示每个项目都是“box”类型。您可以给每个盒子一个唯一的 ID。

Here you go:
http://jsfiddle.net/Mm66A/13/

Please don't use ID fields for naming things "box,box,box", use the Class of 'box' to say that each item is of type 'box'. You can give each box a UNIQUE id.

回复 原文
暗恋未遂 2024-12-29 03:55:59

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

You can't have more than one element with the same id in valid html. Change each id to class and change your jquery selectors from $('#box') and $('#boxover') to $('.box') and $('.boxover') and this should work for you...

回复 原文
冷情 2024-12-29 03:55:59

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

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

First: Don't use the same id for all of your as and divs. An id is a unique identifier of an element, for "groups" of elements there is the class attribute.

To get the corresponding box to show/hide, use the advanced selectors of jquery, trying to get the one box which is directly before the hovered element.

回复 原文
等风来 2024-12-29 03:55:59

你可以这样做：

<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/

基本上你必须使用类 而不是 ids 因为 id 必须是唯一的，并且您将 context 传递给 jquery 选择器以将选择限制为上下文（我使用 this< /代码>)

You could do:

<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);
}

fiddle here http://jsfiddle.net/rynma/

Basically you must use classes instead of ids because id must be unique and you pass a context to the jquery selector to restrict the selection to the context (i use this)

回复 原文
原野 2024-12-29 03:55:59

根据您的目标浏览器，您根本不需要 jQuery。如果您必须以 IE 为目标并且不能立即进行更改而不是过渡，您可以有条件地评论对 Javascript 的引用，就像其他发帖者提到的那样。

Depending on the browsers you're targeting, you don't need jQuery at all. If you have to target IE and can't suffer the immediate change instead of transitioning, you could conditionally comment a reference to a Javascript for it like the other posters have mentioned.

回复 原文
因为看清所以看轻 2024-12-29 03:55:59

我会给每个标签一个唯一的ID，并给上方框一个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);
    }
);

i would give each a tag a unique id, and give the over box an id of 'over_' + id_of_box_link and change id=box to class=box then you can apply the hover by doing this:

you cannot have duplicate IDs.

<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);
    }
);
回复 原文
~没有更多了~

关于作者

柠栀

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

燃烧我的卡路李先生

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

∞梦里开花

文章 0 评论 0

qq_IklFPL

文章 0 评论 0

迷途知返

文章 0 评论 0

深海不蓝

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文