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

Question

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

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?

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

knitevision 10 май 2014, в 03:30

Источник

1

Я думаю, что это связано с распространением событий. Поскольку внутренние div являются дочерними элементами другого div, который получает класс при наведении, внешний div будет по-прежнему иметь тот же класс, потому что вы все еще зависаете над ним, хотя вы нацелены только на дочерний элемент. Не возражаете, если вы просто отделите эти div?
qtgye 10 май 2014, в 01:47
0

@jacelysh это работает, если я немного изменю разметку, да, но что, если мне нужно сохранить текущую структуру разметки?
knitevision 10 май 2014, в 01:49
0

Рассматривали ли вы : hover css псевдо-класс? Вот jsfiddle, который я сделал некоторое время назад с вложенными div и hovers: jsfiddle.net/waltbosz/paTE9
Walter Stabosz 10 май 2014, в 02:02

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

2 ответа

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>

qtgye 10 май 2014, в 00:48

Ещё вопросы

Я думаю, что это связано с распространением событий. Поскольку внутренние div являются дочерними элементами другого div, который получает класс при наведении, внешний div будет по-прежнему иметь тот же класс, потому что вы все еще зависаете над ним, хотя вы нацелены только на дочерний элемент. Не возражаете, если вы просто отделите эти div?
@jacelysh это работает, если я немного изменю разметку, да, но что, если мне нужно сохранить текущую структуру разметки?
Рассматривали ли вы : hover css псевдо-класс? Вот jsfiddle, который я сделал некоторое время назад с вложенными div и hovers: jsfiddle.net/waltbosz/paTE9

Jason Aller · Accepted Answer · 2014-05-10T00-15-00.000Z

В этом решении используется функция .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/

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