jquery: добавление класса в список элементов только при наведении мыши на удаление при наведении мыши? - PullRequest
Новая
       23

jquery: добавление класса в список элементов только при наведении мыши на удаление при наведении мыши?

2 голосов
/ 16 января 2011

Эй, ребята, Какой лучший способ сделать это:

У меня есть список 

<ul>
    <li>hello</li>
    <li>good bye</li>
    <li>arrivederci</li>
    <li class="selected">dude</li>
    <li>whatever</li>
</ul>

Изначально к одному предмету уже применен класс .selected. Когда я наводю курсор мыши на один из элементов списка, я хочу, чтобы у этого был класс .selected. Таким образом, к каждому элементу должен применяться только класс, когда он закончен, как только я оставляю элемент, класс get удаляется, и следующий класс имеет класс.

Ответы [ 3 ]

8 голосов
/ 16 января 2011

Из вашего описания, я думаю, вы хотите это: 

$('ul > li').hover(function () {
    $(this).toggleClass('selected').siblings().removeClass('selected');
});

Демо: http://jsfiddle.net/swN5F/

Или, более вероятно, что вы на самом деле хотите: 

$('ul > li').mouseenter(function () {
    $(this).addClass('selected').siblings().removeClass('selected');
});

Демонстрация: http://jsfiddle.net/swN5F/1/ (обратите внимание, что последний обнаруженный предмет остается красным)

Обновление : версия, которая работает с несколькими <ul> с и клавишами со стрелками вверх / вниз: 

var $activeUl = $('ul:first'); // For keyboard arrows

$('ul > li').mouseenter(function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $activeUl = $(this).parent();
});

$(document).keydown(function (e) {
    var direction, siblingsSelector;
    if (e.which == 38) { // up
        direction = 'prev';
        siblingsSelector = ':not(:first-child)';
    } else if (e.which == 40) { // down
        direction = 'next';
        siblingsSelector = ':not(:last-child)';
    }
    $activeUl.find('.selected')[direction]().addClass('selected')
        .siblings(siblingsSelector).removeClass('selected');
});

Демо: http://jsfiddle.net/zBjrS/36/

3 голосов
/ 16 января 2011

Почему бы вам не использовать встроенную функцию браузера:

Разметка: 

<ul class="hoverUl">
    <li>hello</li>
    <li>good bye</li>
    <li>arrivederci</li>
    <li>dude</li>
    <li>whatever</li>
</ul>

CSS: 

.hoverUl li { /* normal style */ }
.hoverUl li:hover { /* "selected" style */ }

Это немного отличается отто, что вы спросили, потому что сначала ничего не будет выбрано, но почему что-то должно быть выбрано, если выбор сделан при наведении мыши.

Предварительный просмотр

2 голосов
/ 16 января 2011

Вы можете сделать это, используя jQuery's hover: 

$("selector_for_your_ul li").hover(
    function() {
        $(this).addClass("selected").siblings("li").removeClass("selected");
    },
    function() {
        $(this).removeClass("selected");
    }
);

Живой пример

Это переключит «выбранное»Присвойте классу li, на котором находится мышь, и если мышь оставит один li, а не не введет другой, он удалит класс (ни у одного из них не будет "selected"учебный класс).Я думаю это то, что вы сказали, что хотели, хотя это не совпадает с тем, что у одного из них уже есть "выбранный" класс с самого начала.

Если вы просто хотите изменитькогда кто-то наводит мышью на li, но , а не , удаляйте его, когда мышь оставляет li, не вводя другого, используйте mouseenter: 

$("selector_for_your_ul li").mouseenter(
    function() {
        $(this).addClass("selected").siblings("li").removeClass("selected");
    }
);

Пример Live

Если вы посмотрите на событие mouseenter в различных ссылках, они скажут вам, что оно относится к IE.Это правда, но это так полезно, что jQuery эмулирует его в других браузерах.

Обновление : Вы можете изменить siblings("li") на siblings("li.selected") в приведенном выше, если хотите, например: 

$(this).addClass("selected").siblings("li.selected").removeClass("selected");

Это может сделать его немного более эффективным (не пытаясь удалить класс из того, что уже имеет его). Вот первый пример (с hover), обновленный для этого; вот второй пример (с mouseenter), обновленный для этого.

Не по теме : Но в зависимости от того, какой эффект вы хотите, вы можетебыть в состоянии достичь этого с помощью CSS, а не с помощью jQuery и «выбранного» класса.Если вы просто хотите, чтобы li был выделен, когда мышь фактически находится над ним (пример hover выше), вместо того, чтобы оставить последний li выделенным (пример mouseenter выше), и если вам не нужночтобы поддерживать IE6, вы можете сделать это с помощью псевдокласса CSS :hover: 

selector_for_your_ul li:hover {
    color: red; /* ...or whatever... */
}

Живой пример Но опять же, это только если вам нужен эффект наведения, и только если вы не надеваетене нужно поддерживать IE6 (который допускает только :hover на a элементах).

...