jQuery - при наведении курсора изменяйте цвета границ вложенных элементов одного и того же класса. - PullRequest
Новая
       49

jQuery - при наведении курсора изменяйте цвета границ вложенных элементов одного и того же класса.

1 голос
/ 10 марта 2011

Мой html содержит серию вложенных элементов div, каждый из которых имеет один и тот же класс («оболочка»), но уникальный идентификатор. 

<div class="shell s01" id="blah">
    <!-- s01 content -->
    <div class="shell s02" id="bar">
        <!-- s02 content -->
        <div class="shell s03" id="wah">
            <!-- s03 content -->
        </div>

        <div class="shell s03" id="foo">
            <!-- s03 content -->
        </div>
    </div>
</div>

Я хочу, чтобы цвет границы элемента div изменялся при вводе мыши, но он должен вернуться к своему первоначальному цвету, когда мышь входит в дочерний элемент div. Приведенный ниже код jQuery меняет цвет границы на синий, но не возвращает родительские границы div в исходный цвет (# 8E8DA2), когда мышь входит в дочерний div. Вместо этого при наведении курсора на внутренний div он и все его предки подсвечиваются. Например, если навести курсор на «вау», то «бла» и «бар» также будут выделены. Я хочу, чтобы "бла" и "бар" вернулись к исходному цвету границы.

Я понимаю, что когда мышь находится над ребенком, она также над родителем ребенка. Но я не уверен, почему утверждение «parent» ниже не решает проблему. 

$('.shell').mouseover(function() {
    $(this).parent('.shell').css('border-color', '#8E8DA2');
    $(this).css('border-color', '#0000FF');
});

$('.shell').mouseout(function() {
    $(this).css('border-color', '#8E8DA2');
});

Есть идеи? Спасибо!

Ответы [ 3 ]

4 голосов
/ 10 марта 2011

Спасибо, ребята - извините, у меня еще недостаточно представителей, чтобы голосовать за ответы.

Я нашел рабочее решение в этом другом вопросе stackoverflow .Ключ должен был вызвать метод stopPropagation () для события наведения мыши. 

$('.shell').mouseover(function(e) {
    e.stopPropagation();
    $(this).css('border-color', '#0000FF');
})

$('.shell').mouseout(function() {
    $(this).css('border-color', '#8E8DA2');
});
2 голосов
/ 10 марта 2011

Один из вариантов - сохранить текущий цвет границы ячейки в переменной и затем сбросить его, как только мышь покинет ячейку.

Из приведенного выше кода кажется, что цвет, к которому вы хотитечтобы вернуть его, вы можете просто сохранить его в своей собственной переменной.

Вы можете немного изменить свой код и сделать что-то вроде этого: 

var sOriginalColor = '#8E8DA2';
$('.shell')
 .mouseover(function(evt) {
    evt.preventDefault(); // specified for purposes of example mentioned in the comments
    $(this).parent('.shell').css('border-color', sOriginalColor);
    $(this).css('border-color', '#0000FF');
 })
 .mouseout(function() {
    $(this).parent('.shell').css('border-color', sOriginalColor);
    $(this).css('border-color', sOriginalColor);
 });

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

Если это то, что вычто вы испытываете, тогда чтение статьи quirks mode о событиях может помочь вам точно определить, что случилось.

0 голосов
/ 10 марта 2011

Это должно сработать 

$('.shell').mouseenter(function() {
    $(this).parent('.shell').css('border-color', '#8e8da2');
    $(this).css('border-color', '#00f');
});

$('.shell').mouseleave(function() {
    $(this).parent('.shell').css('border-color', '#00f');
    $(this).css('border-color', '#8e8da2');
});

Итак, во-первых, вам нужно использовать mouseenter и mouseleave, потому что они не всплывают, только тот элемент, к которому они прикреплены, получает событие. Кроме того, в отпуске вы должны вернуть родителю цвет «выделение», потому что, когда вы оставляете ребенка, вы, естественно, становитесь родителем. Без этого родительский цвет останется цветом по умолчанию, потому что в этом случае указатель мыши не срабатывает - кажется, что если оставить потомка, не будет введен родительский элемент, поэтому вам, скорее всего, придется сделать это вручную.

...