javascript - divにカーソルを合わせたときにdiv内にある画像を変更する方法

Question

div ブロック内に画像があります。div にカーソルを合わせると、div の背景色を変更し、さらに div 内の画像も変更する必要があります。どうすればこれを入手できますか?

Answer 1

HTML コード: -

<div class="image-cntr">
    <img src="oldImage.jpeg" alt="" />
</div>

JQuery コード:-hover関数を使用

<script type="text/javascript">
jQuery(function(){
    jQuery(".image-cntr").hover(function(){
        jQuery(this).find("img").attr("src", "newImage.jpeg");
    },function(){
        jQuery(this).find("img").attr("src", "oldImage.jpeg");
    },);
});
</script>

Answer 2

HTML

<div id="change">
</div>

CSS

#change
{
width: 200px;
height: 150px;
background-color: blue;
background-image: url("first_image.jpeg");
}

#change:hover
{
background-color: green;
background-image: url("second_image.jpeg");

Answer 3

Jquery を使用できます。

あなたのhtmlが次のようになっていると仮定します：

<div id='container'>
    <img src='1.jpg' />
</div>

このスクリプトを追加します。

$(function(){
    $('#container').mouseover(function() {
        $(this).css('background', 'yellow');
        $(this).find('img').attr('src', '2.jpg');
    })
})