Как получить доступ к этим детям div

Question

Я хочу знать, как использовать доступ к этому внутреннему содержимому.

<div class="content"> 
    <div class="more">more</div> 
</div> 
<div class="content"> 
    <div class="more">more</div> 
</div> 
<div class="content"> 
    <div class="more">more</div> 
</div> 

CSS:

.content .more{ 
    background:#009474; 
    display:block; 
    width:70px; 
    height:25px; 
} 
.content:hover{ 
    transition-property: background; 
    transition-duration: 2s, 1s, 0.5s, 0.5s; 
    background:#009474; 
} 

Jquery:

$(".content").hover(function(){ 
    $(".content .more").css("background-color", "#D0D0D0"); 
    },function(){ 
    $(".content .more").css("background-color","#009474"); 
}); 

Моя цель при наведении курсора мыши, что содержание должно измениться на # 009474 цвет, а внутри класса "больше" цвета в другой. С этим кодом при наведении все остальные классы «больше» меняются. Итак, что я могу сделать, чтобы иметь только внутри класса, чтобы изменить цвет при наведении.
Правильно ли используется $ (это «.more»), но я не получаю никаких изменений.

Answer 1

$(".content").hover(function(){ 
    $(this).find(".more").css("background-color", "#D0D0D0"); 
    } 
); 

Answer 2

попробовать это

$(document).ready(function(){ 

$(".content").hover(function(){ 
    $(this).children(".more").css("background-color", "#D0D0D0"); 
    },function(){ 
    $(this).children(".more").css("background-color","#009474"); 
}); 

}); 

вот jsFiddle File

Answer 3

Вам не нужно использовать Javascript для того, CSS достаточно:

.content:hover { 
    transition-property: background; 
    transition-duration: 2s, 1s, 0.5s, 0.5s; 
    background:#009474; 
} 

/* .more child of the hovered .content */ 
.content:hover > .more { 
    transition-property: background; 
    transition-duration: 2s, 1s, 0.5s, 0.5s; 
    background: #D0D0D0; 
} 

Вы можете увидеть его в действии here.

Если вы хотите, чтобы достичь того же с JQuery, вы должны find (если он является потомком) или children (если это ребенок) .more из парил .content:

$(".content").hover(function(){ 
    $(this).find(".more").css("background-color", "#D0D0D0"); 
    }, function(){ 
    $(this).find(".more").css("background-color","#009474"); 
}); 

here пример но CSS - путь, плохо смешивать стиль и код.