菜鸟碰到jQuery初级神坑问题，请高手来解释，感谢,有代码初门级很简单

Ptrtoptr 2014-07-31 05:41:56

我的用意是达到下面３条效果．
１当鼠标 hover在li上的时候变灰色，
２.当li被click后，li变黑色．表示li被选中
３当li被选中，同时鼠标在上面hover着的时候，这时要是选中色(也就是黑色)，不能再被hover给弄成灰的了！
我的jQuery代码总是达不到第３条的要求，但是我的代码和书上一样，我就心想见鬼了不成，一个字母一个字母对照比较；
我把所有的jQuery代码和html代码宿减到最小，最后弄很小很短，并且和书上一模一样（折腾了一个多小时）
还是没找到后来我发现居然是css的原因．
我是如下定义css的（注意第二行和第三行，书上是li.hover在li.selected的前面，书上能达到那３条效果．）
li{ list-style-type: none; width:100px;cursor:pointer; }
li.selected{ color: #ffffff; background-color: black; }
li.hover { background-color: #dfdfdf; }
我不理解，请高手解释，怎么jQuery代码的执行还与css的定义顺序有关？

代码如下：
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
li{ list-style-type: none; width:100px;cursor:pointer; }
li.selected{ color: #ffffff; background-color: black; }
li.hover { background-color: #dfdfdf; }
</style>
<script src="../Scripts/jquery-2.0.3.js"></script>
<script type="text/javascript">
$( function () {
var $div_li = $( "ul li" );
$div_li.click( function () {
$( this ).addClass( "selected" )
.siblings().removeClass( "selected" );
} ).hover( function () {
$( this ).addClass( "hover" );
}, function () {
$( this ).removeClass( "hover" );
} )
} )
</script>
</head>
<body>
<ul >
<li class=" selected">时事</li>
<li >体育</li>
<li >娱乐</li>
</ul>
</body>
</html>

...全文

134 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

Ptrtoptr 2014-08-01

打赏
举报

引用 8 楼 KK3K2005 的回复:

li.selected.hover { color: #ffffff; background-color: black; } 在加一行 css 没选中没选中＋（鼠标hove）选中选中＋（鼠标hove）应该是4种状态何必节省这么一行css呢这个顺序我觉得就算有也不要依赖为什么？含义太晦涩了

说的对，我应该再加一行

KK3K2005 2014-07-31

打赏
举报

li.selected.hover { color: #ffffff; background-color: black; } 在加一行 css 没选中没选中＋（鼠标hove）选中选中＋（鼠标hove）应该是4种状态何必节省这么一行css呢这个顺序我觉得就算有也不要依赖为什么？含义太晦涩了

xuzuning 2014-07-31

打赏
举报

对就是这3个效果！

Ptrtoptr 2014-07-31

打赏
举报

引用 2 楼 xuzuning 的回复:

经测试，与css的定义顺序无关

请问你的测试结果是不是达到了３个效果，还是第三个效果没达到１当鼠标 hover在li上的时候变灰色，２.当li被click后，li变黑色．表示li被选中３当li被选中，同时鼠标在上面hover着的时候，这时要是选中色(也就是黑色)，不能再被hover给弄成灰的了！

Ptrtoptr 2014-07-31

打赏
举报

但jQuery的代码是单击和hover这两个事件都发生了，也就是说它做了addClass("selected")和addClass("hover') ,　问题是，我的代码和书上仅有的不一样是它的css li.hover 在前，li.selected在后，而我的li.slected在后，li.hover在前 $( function () { var $div_li = $( "ul li" ); $div_li.click( function () { $( this ).addClass( "selected" ) .siblings().removeClass( "selected" ); } ).hover( function () { $( this ).addClass( "hover" ); }, function () { $( this ).removeClass( "hover" ); } ) } )

Ptrtoptr 2014-07-31

打赏
举报

引用 3 楼 functionsub 的回复:

你的样式中hover跟select的优先级都是一样的，所以如果一个元素同时拥有2个样式，后定义的样式会覆盖先定义的样式。因为hover在select之后，所以hover上去的时候如果已经有select样式的话，hover样式会覆盖select样式。我在2楼给出的代码是无视这个顺序了。

我知道你的代码无视这个顺序，为了不让我混淆，咱现在先不说你的代码．说我贴的代码，你的意思是我定义的ＣＳＳ li{ list-style-type: none; width:100px;cursor:pointer; } li.selected{ color: #ffffff; background-color: black; } li.hover { background-color: #dfdfdf; } 因为li.hover定义在后面，它覆盖了 li.selected{ color: #ffffff; background-color: black; }是吗？

functionsub 2014-07-31

打赏
举报

你的样式中hover跟select的优先级都是一样的，所以如果一个元素同时拥有2个样式，后定义的样式会覆盖先定义的样式。因为hover在select之后，所以hover上去的时候如果已经有select样式的话，hover样式会覆盖select样式。我在2楼给出的代码是无视这个顺序了。

xuzuning 2014-07-31

打赏
举报

经测试，与css的定义顺序无关

functionsub 2014-07-31

打赏
举报

            $( function () {
                var $div_li = $( "ul li" );
                $div_li.click( function () {
                    $(this).removeClass('hover')
                    $( this ).addClass( "selected" )
                           .siblings().removeClass( "selected" );
                } ).hover( function () {
                    if($(this).hasClass('selected')) return;
                    $( this ).addClass( "hover" );
                }, function () {              
                    $( this ).removeClass( "hover" );
                } )
            } )