jquery反向选择的问题

例如,一组图片，高度不定，先用css全部强制设置为height为20px.然后将第一张稍微放大为60px.当鼠标指向时，放大当前图片，其他的恢复为20px.如下。
$(document).ready(function () {
// 默认第一张图片高60px
$('#test').eq(0).find('img').attr('style', 'height:60px;'); $('#test > li > img').bind('mouseover', function () {
  // 鼠标指向时给于60px的高度
  $(this).find('img').attr('style', 'height:60px;'); }); $('#test >li > img').bind('mouseout', function () {
  // 离开时恢复20px的高度
  $(this).find('img').attr('style', 'height:20px;'); });});<ul id="test">
<li><img src="1.jpg" alt="" /></li>
<li><img src="2.jpg" alt="" /></li>
<li><img src="3.jpg" alt="" /></li>
<li><img src="4.jpg" alt="" /></li>
</ul>问题是，当设置了mouserout后，鼠标离开ul区域所有图片就恢复为20px了。我现在想实现的是，始终有一张图片保持为60px.应该是在mouseover时，给当前行60px的高度，然后反向选择其他所有的li,把它们设置为20px，这样及时鼠标离开区域，最后被指向的图片高度也能保持在60px.就是不知道这个反向选择该怎么写？not() 和 mouserover 如何配合使用？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

$("#test").children("li").eq(0).find("img")
$(document).ready(function () { // 默认第一张图片高60px $('#test').eq(0).find('img').attr('style', 'height:60px;');
$('#test > li > img').bind('mouseover', function () { // 鼠标指向时给于60px的高度
$('#test > li > img').attr('style', 'height:20px;');
$(this).find('img').attr('style', 'height:60px;'); });
});
不好意思，上面是我现在实现的。我把问题写在了下面，让楼上热心的朋友误会了。这个帖不能编辑，真是的。问题是，当设置了mouserout后，鼠标离开ul区域所有图片就恢复为20px了。我现在想实现的是，始终有一张图片保持为60px.应该是在mouseover时，给当前行60px的高度，然后反向选择其他所有的li,把它们设置为20px，这样及时鼠标离开区域，最后被指向的图片高度也能保持在60px.就是不知道这个反向选择该怎么写？not() 和 mouserover 如何配合使用？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script src="jquery-1.4.2.min.js">
        </script>
        <script>
            $(function(){
$("#test").children("li").find("img").css("height","50px")
.mouseover(function(){
$(this).css("height","70px");
})
.mouseout(function(){
$(this).css("height","50px");
})
            })
        </script>
    </head>
    <body>
        <ul id="test">
            <li>
                <img src="1.jpg" alt="" />
            </li>
            <li>
                <img src="2.jpg" alt="" />
            </li>
            <li>
                <img src="3.jpg" alt="" />
            </li>
            <li>
                <img src="4.jpg" alt="" />
            </li>
        </ul>
    </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script src="jquery-1.4.2.min.js">
        </script>
        <script>
            $(function(){
$("#test").children("li").find("img").css("height","50px")
.mouseover(function(){
$(this).css("height","70px");
$(this).parent("li").siblings().find("img").css("height","50px");
})
.mouseout(function(e){
var flag = false;
var x = e.clientX;
var y = e.ClientY;
var others = $(this).parent("li").siblings();
for(var i=0;i<others.length;i++){
var obj = $(others[i]).find("img");
var xx = obj.offset().left;
var yy = obj.offset().top;
var ww = obj.width();
var hh = obj.height();
if((x*1 >= xx*1 && x*1 <= xx*1+ww*1) && (y*1 >= yy*1 && y*1 <= yy*1+hh*1)){
flag = true;
break;
}
}
//alert(flag);
if(flag){
$(this).css("height","50px");
}
})
            })
        </script>
    </head>
    <body>
        <ul id="test">
            <li>
                <img src="1.jpg" alt="" />
            </li>
            <li>
                <img src="2.jpg" alt="" />
            </li>
            <li>
                <img src="3.jpg" alt="" />
            </li>
            <li>
                <img src="4.jpg" alt="" />
            </li>
        </ul>
    </body>
</html>
或者你只写mouseover 不写mouseout 试试
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script src="jquery-1.4.2.min.js">
        </script>
        <script>
            $(function(){
$("#test").children("li").find("img").css("height","50px")
.mouseover(function(){
$(this).css("height","70px");
$(this).parent("li").siblings().find("img").css("height","50px");
})
            })
        </script>
    </head>
    <body>
        <ul id="test">
            <li>
                <img src="1.jpg" alt="" />
            </li>
            <li>
                <img src="2.jpg" alt="" />
            </li>
            <li>
                <img src="3.jpg" alt="" />
            </li>
            <li>
                <img src="4.jpg" alt="" />
            </li>
        </ul>
    </body>
</html>
設置兩個CLASS，一個SELECTED一個UNSELECTED, MOUSEOVER的時候所有SELECTED的設置為UNSELECTED，當前焦點設為SELECTED，不用MOUSEOUT
babyboy9685的方法就是我要的效果。原来忽略了jquery的siblings()，想不到还可以这样实现。太感谢了。getserved 感谢你给出不同的思路，实现我还需要尝试一下。