изменение цвета каждого элемента в теге ul

Я новичок в JQuery. Я хочу сделать эту работу. Если пользователь переходит с помощью мыши над текстом, то ul shold будет отображаться пользователю, и если пользователь выбирает каждый из iems в этом ul, тогда цвет этого li должен быть изменен на красный. Я написал этот код, но если пользователь выбирает li, цвет всех lis изменяется, как я могу решить свою проблему, спасибо?изменение цвета каждого элемента в теге ul

<script> 
    $(document).ready(function() { 
     $('#div1').hover(function() { 
      $('#ul1').css("display", "") 
     }, 
      function() { 
       $("#ul1").css("display", "none"); 
      }); 
     $('li').hover(function() { 
      $('li').css("color", "red") 
     }, function() { 
      $('li').css('color', 'black'); 
     }); 
    }); 
</script> 
</head> 
<body> 
<h1>Welcome to our website</h1> 
<br /> 
<div id="div1"><p id="p1" style="font-size:large">Our products </p> 
<br /> 
<ul style="display:none" id="ul1" > 
<li>Milch</li> 
<li>Schokolade</li> 
<li>kuchen</li> 
<li>Honig</li> 
</ul> 
</div> 
</body> 
</html>

источник

2013-07-24 TangoStar

Сторона: в этом простом примере стиль цветного наведения действительно должен выполняться в CSS, а не в JS. – DRobinson

Используя только CSS:

DEMO

#ul1 {display:none;} 
#div1:hover #ul1{display:block;} 
#ul1 li:hover {color:red}

В противном случае:

DEMO

$(document).ready(function() { 
    $('#div1').hover(function() { 
     $('#ul1').toggle() 
    }); 
    $('#ul1 li').hover(function() { 
     $(this).css("color", "red") 
    }, function() { 
     $(this).css('color', 'black'); 
    }); 
});

Вместо того, чтобы использовать метод() CSS, для укладки необходимо использовать класс:

.red {color:red;}

Тогда ваш код может быть просто:

$(document).ready(function() { 
    $('#div1').hover(function() { 
     $('#ul1').toggle() 
    }); 
    $('#ul1 li').hover(function() { 
     $(this).toggleClass("red"); 
    }); 
});

DEMO

источник

2013-07-24 15:49:44

Использование $(this) изменить цвет парил li только

$('li').hover(function() { 
     $(this).css("color", "red") 
}, function() { 
     $(this).css('color', 'black'); 
});

Демо-версия ---->http://jsfiddle.net/Sn9hE/

источник

2013-07-24 15:50:01

Ух ... избили меня ... – defaultNINJA

изменение цвета каждого элемента в теге ul

ответ

Смежные вопросы