Наведение, затрагивающее только один элемент во вложенном множестве

0

Я не могу изменить следующий HTML - структуру, которая имеет вложенную <div> элементы, которые все имеют один и тот же класс block. Я хочу включить поведение наведения, которое влияет только на элемент, над которым находится мышь, а не на другие вложенные элементы.

<div class="block">
    <div class="block">
        <div class="block">
            <div class="block">
                Text
            </div>
            Text
        </div>
        Text
    </div>
    Text
</div>

Здесь скрипка для демонстрации: http://jsfiddle.net/FqKCY/3/

Я попытался использовать это:

$( ".block" ).hover(
    function() {
        $( this ).addClass( "hover" );
    }, function() {
        $( this ).removeClass( "hover" );
    }
);

Но это не помогло. Может быть, я добавлю if statement с .hasClass checker?

Является ли эффект, который я пытаюсь сделать возможным?

  • 1
    Я думаю, что это связано с распространением событий. Поскольку внутренние div являются дочерними элементами другого div, который получает класс при наведении, внешний div будет по-прежнему иметь тот же класс, потому что вы все еще зависаете над ним, хотя вы нацелены только на дочерний элемент. Не возражаете, если вы просто отделите эти div?
  • 0
    @jacelysh это работает, если я немного изменю разметку, да, но что, если мне нужно сохранить текущую структуру разметки?
Показать ещё 1 комментарий

2 ответа

1
Лучший ответ

В этом решении используется функция .hover() вы начали работать. Лучшее решение может заключаться в том, чтобы написать собственный обработчик, который предотвращает распространение событий с использованием .on(). Вы заметите, что текст для всего стека изменяется, потому что.css наследует, но вы можете изменить.css, чтобы этого не произошло.

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

$(".block").hover(function () {
    $(".block").removeClass("hover");
    $(this).addClass("hover");
}, function () {
    $(".block").removeClass("hover");
    $(this).parent(".block").addClass("hover");
});

JSFiddle: http://jsfiddle.net/FqKCY/5/

  • 0
    Это работает довольно хорошо, но если вы наведете курсор на последний элемент block то увидите, что все остальные сохраняют текст красного шрифта, но отбрасывают текст border-color , как это?
  • 1
    Да, потому что правило hover css гласит color: red; и это относится ко всему тексту в элементе и в дочерних элементах. Вы должны установить другие правила, чтобы переопределить это. Например, добавление .hover .block {color: black;} переопределит цвет текста детей.
Показать ещё 1 комментарий
1

Я попытался немного изменить разметку. Проверьте эту скрипку.

HTML:

<div class="block">
    <div class="block">
        <div class="block">
            <div class="block">
                <span>Text</span>
            </div>
            <span>Text</span>
       </div>
       <span>Text</span>
    </div>
    <span>Text</span>
</div>
Сообщество Overcoder
Наверх
Меню