Добавить класс при наведении для детей в jQuery?

У меня есть страница, на которой будет ряд «плиточных» элементов div, каждый из которых будет иметь один или несколько дочерних элементов div.

Я хочу, чтобы при переносе родительского div менялся его класс и все div в состояние наведения.

Я могу легко заставить родительский div работать, но не могу получить дочерний элемент: см. Fiddle

$('.tile').hover(
            function () {
                $(this).addClass("hover");
                $(this).find('.inner').addClass("hover");
              },
              function () {
                $(this).removeClass("hover");
                $(this).find('.inner').removeClass("hover");
              }
        )

Во всех примерах, которые я вижу с использованием «найти», используется родитель NAMED; но мне просто нужно использовать дочерние элементы любого текущего родителя, над которым зависает ($ this).

РЕДАКТИРОВАТЬ/ОБНОВИТЬ:

Часть моей проблемы заключается в том, что внутри div есть кнопка изображения. У этой кнопки должен быть СОБСТВЕННЫЙ ролловер. Смотрите изображение от дизайнера ниже. Я могу получить первую комбинацию - все голубое и белая кнопка плюс... но с помощью CSS я не могу повлиять на PARENTS кнопки lus, не так ли?

введите здесь описание изображения


jquery css hover jquery-hover
person Steve    schedule 09.11.2012    source источник
comment
Существуют ли два разных состояния для этих .tiles: одно до добавления плитки в места назначения пользователя (серая кнопка, беловатый фон) и одно после ее добавления (синяя кнопка, беловатый фон)?   -  person chrisgonzalez    schedule 09.11.2012
comment
Неясно, но из этих спецификаций они хотят, чтобы нижний ролловер при наведении курсора на плитку, а затем верхний правый ролловер, когда вы наводите курсор на саму кнопку. Это может сработать   -  person Steve    schedule 09.11.2012
comment
Это один из тех, которые красиво выглядят в композициях, но не имеют смысла, когда вы используете его для статического дизайна :) Удачи!   -  person chrisgonzalez    schedule 09.11.2012

Ответы (3)


arrow_upward
6
arrow_downward

Вместо написания этого скрипта попробуйте использовать псевдокласс CSS :hover для ВСЕХ ваших зависших элементов, например:

    .tile {
        width: 200px;
        height: 300px;
        background-color: yellow;
        margin: 20px;
    }
    .tile:hover {
        background-color: lightblue;
    }
    .inner {
        width: 200px;
        height: 50px;
        background-color: goldenrod;
    }

    .tile:hover .inner{
        background-color:#369;
    }

    .tile:hover button{
        color:#ff0000;
    }
    .tile:hover button:hover{
        color:#00ff00;
    }

Нет сценария, не беспокойтесь :)

Скрипт: http://jsfiddle.net/67tCr/

person chrisgonzalez    schedule 09.11.2012
comment
Проголосовать за CSS › JS. Производительность ВСЕГДА будет лучше с CSS. - person sethetter; 09.11.2012
comment
Да, я согласен. Я не знал (по какой-то причине), что изменение при наведении на дочерний элемент будет локализовано для рассматриваемой плитки. Это круто. - person Steve; 09.11.2012
comment
Возможно многоступенчатое зависание! - person chrisgonzalez; 09.11.2012

arrow_upward
3
arrow_downward

Ваш код в порядке... вам просто нужно изменить порядок правил CSS:

.tile {
    width: 200px;
    height: 300px;
    background-color: yellow;
    margin: 20px;
}

.inner {
    width: 200px;
    height: 50px;
    background-color: goldenrod;
}

.hover {
    background-color: lightblue;
}

обновленная скрипта

Или можно поконкретнее

.hover, .inner.hover {
  background-color: lightblue;
}
person Kyle    schedule 09.11.2012

arrow_upward
0
arrow_downward

Я бы использовал функцию «дети»:

$(".title").hover(function(){
  $(this).addClass("hover");
  $(this).children(".inner").addClass("hover");
},function(){
  $(this).removeClass("hover");
  $(this).children(".inner").removeClass("hover");
});

Вот скрипт: http://jsfiddle.net/ckaufman/qXU7R/1/

person ckaufman    schedule 09.11.2012