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

您可以使用 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');
    })
})

Answer 3

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");