jquery经过和点击 改CSS冲突了

jquery经过和点击 改CSS冲突了
按钮本来是黑色 经过以后是红色 离开就是黑色 我又做了个 点击以后是红色 问题出现了 离开 变成黑色了 我要离开也要红色。。 $(document).ready(function(){$('.header_s_li ul li').hover(function() {
  
  $(this).animate({
     opacity:1,
  }, 500, function() {
    // Animation complete.
  });
},function() {  $(this).animate({
     opacity:0.3,
  }, 100, function() {
    // Animation complete.
  });
});
});$(document).ready(function(){$('.header_s_li ul li').click(function() {
  
  $(this).animate({
     opacity:1,
  }, 200, function() {
     $('.header_s_li ul li').not(this).animate({
     opacity:0.3,
  });
  });
},function() {  $(this).animate({
     opacity:1,
  }, 100, function() {
    // Animation complete.
  });
});
});怎么解决这个冲突问题呢

解决方案 »

  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>
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">
            /*鼠标经过增加透明度 离开降低透明度*/
            $(document).ready(function () {
                $('.header_s_li ul li').bind("mouseenter", function () {
                    $("#divInfo").html($("#divInfo").html() + "1");
                    $(this).unbind("mouseleave").bind("mouseleave", function () {
                        $(this).animate({
                            opacity: 1
                        }, 500, function () {
                            // Animation complete.
                        });
                    });
                    $(this).animate({
                        opacity: 0.3
                    }, 500, function () {
                        // Animation complete.
                    });            });
            });
            /*鼠标点击降低增加透明度 离开不降低透明度*/
            $(document).ready(function () {
                $('.header_s_li ul li').bind("click", function () {
                    $(this).animate({
                        opacity: 0.3
                    }, 500, function () {
                        // Animation complete.
                    });
                    $(this).unbind("mouseleave");
                });
            });
        </script>
    </head>
    <body>
        <div id="divInfo">
        </div>
        <div class="header_s_li">
            <ul>
                <li style="background-color: Black; line-height: 32px; color: White;">
                    <div>
                        <p>
                            鼠标经过增加透明度 离开降低透明度</p>
                        <p>
                            鼠标点击增加透明度 离开不降低透明度</p>
                    </div>
                </li>
            </ul>
        </div>
    </body>
    </html>