のjQuery：要素の子にクラスの追加

Question

HTML：

<div class="cell-container"> 
    <img src="image.png" class="thumbnail" /> 
</div> 

CSS：

.hover { 
    background-color: silver; 
} 
.hover-image { 
    border: 1px solid #000; 
} 

のjQuery：

$(".cell-container").mouseover(function() { 
    $(this).addClass("hover"); 
}); 

$(".cell-container").mouseout(function() { 
    $(this).removeClass("hover"); 
}); 

は基本的に私がしたいのdiv cell-containerは、背景を強調表示します。しかし、内に含まれている<img>にも境界線を追加してください。どうすればこれを達成できますか？

Answer 1

CSSでこれを行うのはなぜですか？

div.cell-container:hover { 
    background-color: silver; 
} 

div.cell-container:hover img.thumbnail { 
    border: 1px solid #000; 
} 

Answer 2

btw $.hoverは、マウスオーバーとマウスアウトの両方を提供します。 hover()here上

$(".cell-container").hover(function() { 
    $(this).addClass("hover"); 
    $(this).children('img').addClass('hover-image'); 
}, function() { 
    $(this).removeClass("hover"); 
    $(this).children('img').removeClass('hover-image'); 
}); 

Answer 3

$(".cell-container").hover(function(){ // using hover for shorter syntax 
    $(this) 
     .addClass("hover") // add hover class on mouseover 
     .find("img") // select the child image 
      .addClass("hover-image"); // add hover class 
}, function(){ // mouseout function 
    $(this) 
     .removeClass("hover") // remove hover class 
     .find("img") // select the child image again 
      .removeClass("hover-image"); // remove hover class 
}); 

より。

Answer 4

DEMO

$(".cell-container").mouseover(function() { 
    $(this).addClass("hover").find('img').addClass('hover-image'); 
}); 

$(".cell-container").mouseout(function() { 
    $(this).removeClass("hover").find('img').removeClass('hover-image'); 
}); 

そして、あなたはあなたのCSSを変更する必要があります。

.hover-image { 
    border: 1px solid #000; 
} 

Answer 5

$(".cell-container").hover(
    function() { 
    $(this).addClass("hover"); 
    $(this).children("img").addClass("img-hover"); 
    }, 
    function() { 
    $(this).removeClass("hover"); 
    $(this).children("img").removeClass("img-hover"); 
    } 
); 



.hover-image { 
    border: 1px solid #000; 
} 

Answer 6

方法について：

.cell-container:hover 
{ 
    background-color: silver; 
} 

.cell-container:hover img 
{ 
    border: 1px solid #000; 
} 

ただのCSS。

スタイリングクラスを追加するだけの場合は、達成しようとしていることがCSSでは不可能であることを確認する必要があります（通常はそうです）。