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

如何在div上悬停时更改div内的图像

3 个答案: