3

このコンテンツ内のアクセスの使用方法を知りたいです。

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

Jクエリ:

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

私の目的は、コンテンツが #009474 の色に変わり、クラス内の "more" の色が他の色に変わることです。このコードをホバーすると、他のすべてのクラスの「その他」が変更されます。では、ホバー時に色を変更するクラス内のみを使用するにはどうすればよいですか。
$(this '.more') を使用する権利はありますが、これで変更はありません。

4

3 に答える 3

0

これを試して

$(document).ready(function(){

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

});

ここにjsFiddleファイルがあります

于 2013-06-15T05:10:28.367 に答える
0 
$(".content").hover(function(){
    $(this).find(".more").css("background-color", "#D0D0D0");
  }
);
于 2013-06-15T05:02:33.500 に答える
0

そのために 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 がその方法です。スタイルとコードを混在させるのは良くありません。

于 2013-06-15T05:24:26.390 に答える