当前位置：首页 → 问答吧 → 求助jquery z-index

求助jquery z-index

时间：2010-05-28

来源：互联网

$("#pic1").siblings().andSelf().hover(function(){$(this).css("z-index","10")},function(){$(this).css("z-index","0")});
});

<div id="footer">
<img src="photos/cool20081016_007_thumb.jpg" id="pic1">
<img src="photos/cool20081016_007_thumb.jpg" id="pic2">
<img src="photos/cool20081016_007_thumb.jpg" id="pic3">
</div>
http://www.andreashinkel.com/deutsch/news/news.html
想做类似这样的效果。。。

作者: liuyunclouder 发布时间: 2010-05-28

单个元素移动上去的时候z-index增加，同辈元素为0即可

$(this).css("z-index","2").siblings().css("z-index","1")

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #footer{ background:#000; position:relative;width:100%; height:200px} #footer img{ position:absolute; top:10px;;} #footer img#pic1{ position:absolute; top:10px;left:10px ; border:2px solid #f00;} #footer img#pic2{ position:absolute; top:20px;left:110px; border:2px solid #fff} #footer img#pic3{ position:absolute; top:30px;left:210px; border:2px solid #ff0} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#footer").find("img").mouseover(function(){ $(this).css("z-index","2").siblings().css("z-index","1"); }) }) </script> </head> <body> <div id="footer"> <img src="http://img.baidu.com/img/post-jg.gif" id="pic1"> <img src="http://img.baidu.com/img/post-jg.gif" id="pic2"> <img src="http://img.baidu.com/img/post-jg.gif" id="pic3"> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 lyh6631791 于 2010-5-28 14:13 编辑 ]

作者: lyh6631791 发布时间: 2010-05-28

$("#footer").find("img").mouseover(function(){$(this).css("z-index","2").siblings().css("z-index","1"));
是这样吧
还是不行。。。。。。

作者: liuyunclouder 发布时间: 2010-05-28

嗯，好了，原来是没设position.......

作者: liuyunclouder 发布时间: 2010-05-28