jquery - 如何访问这个儿童 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;
}

查询：

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

我的目标是悬停，内容应该更改为#009474 颜色，而类内的“更多”颜色应更改为其他颜色。悬停此代码后，所有其他类“更多”都在发生变化。那么我能做些什么才能让只有在课堂上才能在悬停时改变颜色。
$(this '.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 文件

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;
}

您可以在这里看到它的实际效果。

如果你想用 JQuery 达到同样的效果，你必须从悬停中找到（如果它是后代）或孩子（如果它是孩子）：.more.content

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

这是一个例子，但 CSS 是一种方式，混合样式和代码是不好的。