Добавяне на клас при задържане на мишката за деца в 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");
              }
        )

Всички примери, които виждам с помощта на "find", използват NAMED родител; но просто трябва да използвам децата на текущия родител, върху който се задържа курсора ($this).

РЕДАКТИРАНЕ/АКТУАЛИЗАЦИЯ:

Част от моя проблем е, че вътре в div има бутон за изображение. Предполага се, че този бутон има свое СОБСТВЕНО преобръщане. Вижте изображението от дизайнера по-долу. Мога да получа първата комбинация -- всичко синьо и белия бутон плюс... но с CSS не мога да повлияя на РОДИТЕЛИТЕ на бутона 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;
    }

Без скрипт, без притеснения :)

Fiddle: 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

Бих използвал функцията 'children':

$(".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