Jquery каждый <li>применить фон при наведении мыши - PullRequest
Новая
       25

Jquery каждый <li>применить фон при наведении мыши

2 голосов
/ 12 марта 2012

Не могу заставить это работать: 

$(function() {
  $("#side").$("li").each(function() {
    $(this).mouseover(function() {
      $(this).backgroundColor = "#c0c0c0";
    });
  });
});

Фрагмент HTML для итерации: 

<div id='side'>
   <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
   </ul>
</div>

Ответы [ 3 ]

4 голосов
/ 12 марта 2012

Попробуйте вместо этого: 

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

Я видел следующие проблемы:

  1. Селектор, который вы использовали для вашего ul / li, был неверным.Вам нужно использовать метод детей.
  2. Изменение CSS отличается в jquery от javascript.Вместо этого используйте метод css.
  3. Обязательно верните цвет по умолчанию (в данном случае белый), когда мышь уходит.В противном случае он всегда будет таким серым (даже когда мышь уходит).

JSFiddle: http://jsfiddle.net/L8hsz/
Надеюсь, это поможет.

РЕДАКТИРОВАТЬ: Если вы беспокоитесьЧто касается цвета фона, вы можете сделать что-то похожее на: 

$(function() {
    $("#side").children("li").each(function() {
        $(this).data("DefaultBGColor", $(this).css("background-color"));
        $(this).mouseover(function() {
            $(this).css ("background-Color", "#c0c0c0");
        });
        $(this).mouseout(function () {
            $(this).css("background-Color", $(this).data("DefaultBGColor")); 
        });
    });
});​
2 голосов
/ 12 марта 2012

Я думаю, вы можете использовать событие hover: 

$(function() {
    $("#side").children("li").hover(
        function() {
            $(this).css ("background-Color", "#c0c0c0");
        },
        function() {
            $(this).css("background-Color", "#FFF"); 
        }
   );
});​
0 голосов
/ 03 мая 2014

Просто к сведению - для эффектов наведения блока li вам не нужен javascript или Jquery, это можно сделать на 100% в CSS. Единственное исключение - если вам нужно работать с IE6.

Я забыл комментарий Бена выше:

http://jsfiddle.net/stevembrennan/tLZNL/

Разметка из оригинального примера

1 2 3

CSS для добавления 

ul {float:left; left:0; position:absolute; right:auto;  width:auto;}
li {clear:left; float: left; left:auto; margin:0px; width:100%; text-align:left;      display:block; background-color:#00a0e1;}
li a {display:block; padding:4px 10px;}
li a:hover {background-color:red;}

JS не требуется

Если вам нужна помощь, как это сделать в IE6, дайте мне знать. Есть хитрость, в которой вы можете добавить блочный элемент вокруг всего этого, и он заставит навести курсор мыши на удар. Извините за столь поздний ответ.

...