CODEWITHSUNDEEP
jqueryhtmlcss
Hirvesh
Hirvesh

Reputation: 7982

List Hover issue

I've already asked this question, but I think I din't explain the problem well enough. So here we go again:

I've got a list. With a default background color as shown in the picture above. I want to make item 4 background change to color #EDEDED when hovered upon. Only Item 4. Item 3, item two should remain with the original background color.

How do I do that? My problem has been that when I hover on item 4, all parent items get their background color changed to #EDEDED also. Any JQuery or CSS solution is appreciated.

Here's the code for the list above:

  <ul>
    <li class='comment'>
      <div class='comment-body'>
        item 2
      </div><abbr class='timestamp' title='2011-02-18 11:39:32'>2011-02-18 11:39:32</abbr>
      <div class='aut'>
        Anonymous
      </div><a href='#comment_form' class='reply' id='2' name="2">Reply</a>
      <ul id='comments-ul'>
        <li class='comment'>
          <div class='comment-body'>
            item 3
          </div><abbr class='timestamp' title='2011-02-18 11:40:07'>2011-02-18 11:40:07</abbr>
          <div class='aut'>
            Anonymous
          </div><a href='#comment_form' class='reply' id='3' name="3">Reply</a>
          <ul id='comments-ul'>
            <li class='comment'>
              <div class='comment-body'>
                item 4
              </div><abbr class='timestamp' title='2011-02-18 11:40:12'>2011-02-18
              11:40:12</abbr>
              <div class='aut'>
                Anonymous
              </div><a href='#comment_form' class='reply' id='4' name="4">Reply</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class='comment'>
      <div class='comment-body'>
        item 1
      </div><abbr class='timestamp' title='2011-02-18 11:39:28'>2011-02-18 11:39:28</abbr>
      <div class='aut'>
        Anonymous
      </div><a href='#comment_form' class='reply' id='1' name="1">Reply</a>
    </li>
  </ul>

Upvotes: 0

Views: 235

Answers (2)

Piksel8
Piksel8

Reputation: 1428

Here you go:

$('li:not(:has(li))').hover(
    function() {
        $(this).css({'background': '#EDEDED'});
    },
    function() {
        $(this).css({'background': 'none'});
    }
);

Demo: http://jsfiddle.net/a6LqJ/

Upvotes: 1

Sharad
Sharad

Reputation: 1

bind hover event for #comments-ul li, add a delay so that the other items do not display a background if the intent is item4 . you can try to use http://cherne.net/brian/resources/jquery.hoverIntent.html plugin

Upvotes: 0

Related Questions