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来自悬停{ {1}}：

.content

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

如何访问这个子div

3 个答案: