0

Hello friends heres my code

Jquery

<script>
    $(document).ready(function(){
        $('#sitemap').children('li').addClass('cl');

        $('.cl').mouseenter(function() {
            $(this).css('background','#eee');
            $(this).siblings('li').css('background','');
            $(this).parents().css('background','');
        })

        $('.cl').mouseout(function() {
            $(this).css('background','');
        })
    })
</script>

HTML

<ul id="sitemap">
    <li>
        one
        <ul>
            <li>two</li>
            <li>two</li>
            <li>two</li>
            <li>two</li>
        </ul>
    </li>
    <li>one</li>
    <li>one</li>
</ul>

i am getting confused how to solve my problem actually i want a simple effect when mouseenter() on <li> background color will change .. but when I use nested list then its not working fine . I want when user hover the li the background color will change

Please help me

Thanks in advance :)

4

6 回答 6

3

You don't really need JavaScript for this, just use CSS

  #sitemap li {
  background-color:white;
  }

  #sitemap li:hover {
  background-color:red;
  }

you can also add any other selectors you require.

于 2012-04-18T12:56:37.727 回答
1

If you're in standards mode and you don't need to support IE6, you can do this with just CSS:

.cl:hover {
    background: #eee;
}

No JavaScript required. Unfortunately, IE6 only respects :hover on a elements. Also note that you need to be standards (not quirks) mode for it to work correctly in IE7.

Update: Based on your comment below:

problem is when i use nested list then this code will change all nested <li> background color

It sounds to me like you want to be highlighting something more specific than the li, then, because setting the top-level li's background color will color it and its descendant elements (unless they have an override color, which would be ugly in the case of your first item with the ul in it). I think I'd change the structure:

<ul id="sitemap">
    <li>
        <div>one</div>
        <ul>
            <li><div>two</div></li>
            <li><div>two</div></li>
            <li><div>two</div></li>
            <li><div>two</div></li>
        </ul>
    </li>
    <li><div>one</div></li>
    <li><div>one</div></li>
</ul>

...and then use this CSS:

#sitemap div:hover {
    background: #eee;
}

Live example | source

于 2012-04-18T12:56:50.853 回答
1

请Update您jquery使用以下代码

$(function() {
    $("#sitemap").children("li").each(function() {
        $(this).mouseover(function() {
            $(this).css ("background-Color", "#c0c0c0");
        });
        $(this).mouseout(function () {
            $(this).css("background-Color", "#FFF"); 
        });
    });
});​

看到这个 Jsfiddle：http: //jsfiddle.net/v4CL5/

希望这对你有帮助

于 2012-04-18T13:06:31.443 回答
0

该.children()函数仅向下一层 DOM，因此您的选择器将仅匹配直接低于with ID的<li>元素。使用该函数来匹配该元素内的所有元素，无论它们位于 DOM 的哪个级别。<ul>sitemap.find()<li>

也就是说，如果您可以访问 HTML，我不确定为什么要使用 jQuery 添加类。

于 2012-04-18T12:55:23.453 回答
0

just change

$('#sitemap').children('li')

into

$('#sitemap li')

since children() is looking for immediate children of #sitemap list (and not also for sub-nested list-items)

于 2012-04-18T12:56:32.383 回答
0

这应该让你开始，虽然我认为我不得不关闭所有孩子'ul li'有点笨拙：

http://jsfiddle.net/Ashenkase/weHBT/

于 2012-04-18T13:32:17.663 回答