Question

Web开发学生，尝试使用简单的javascript鼠标悬停。这段代码不起作用，有什么建议吗？编辑：这已经过编辑，现在正尝试使用悬停。

<DOCTYPE! html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title id="title"> Hybris Studios </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>
$(document).ready(function() {  
// Rollover image
var homeBlack = new Image();
homeBlack.src = "http://hybrisstudios.com/Images/HomeBlack.png";
var oldSrc = $('.homeRed').attr('src');
$('.homeRed').hover(function() {
    $(this).attr('src', homeBlack.src);
},
function() 
{
    $(this).attr('src', oldSrc);    
}); // end hover        
}); // end ready
</script>

</head>

<body>
<!-- Image Divs -->
<div class="homeRed">
<img src="Images/HomeRed.png"/>
</div>

</body>
</html>
<!-- CSS -->
<style type="text/css">

.homeRed {
    position : fixed;
    top  : 180px;
    left : 170px;
    }
</style>

Answer 1

您可以在mouseover或mouseleave上直接更改图片src，而无需创建Image对象。

Fiddle

HTML：

<img src="http://s25.postimg.org/e2wx0t4p7/chrome.png" />

jQuery的：

$('img').mouseover(function() {
    $(this).attr('src', 'http://s25.postimg.org/46vu15yx7/tardis.jpg');
}).mouseleave(function() {
    $(this).attr('src', 'http://s25.postimg.org/e2wx0t4p7/chrome.png');
});

|| ----编辑---- ||

Fiddle

您的代码已修复。

HTML：

<div class="homeRed">
    <img src="http://s25.postimg.org/e2wx0t4p7/chrome.png" />
</div>

jQuery的：

$(document).ready(function () {
    $('.homeRed').mouseover(function () {
        $(this).find('img').attr('src', "http://s25.postimg.org/46vu15yx7/tardis.jpg");
    });
});

CSS：

.homeRed {
    position : fixed;
    top : 180px;
    left : 170px;
}

Answer 2

您的图像使用了错误的选择器。你选择div，而不是里面的img。

$('.homeRed')

正确的是：

$('.homeRed>img')

那么整行应该是：

$('.homeRed>img').hover(function() {

Answer 3

尝试使用此

$(document).ready(function() {
    // Rollover image
    var homeBlack = new Image();
    homeBlack.src = "Images/HomeBlack.png";  //this is a shorthand for the actual src
    $('.homeRed').hover(function() {
        $(this).attr('src', homeBlack.src);
    }); // end mouseover        
}); // end ready

Answer 4

这个怎么样：

$(document).ready(function() {
    // Rollover image
    var homeBlack = new Image();
    homeBlack.src = "Images/HomeBlack.png";  //this is a shorthand for the actual src
    $('.homeRed').on('mouseover', function() {
         $(this).attr('src', homeBlack.src);
    }); // end mouseover        
});

鼠标悬停不起作用？

4 个答案:

Fiddle

HTML：

jQuery的：

|| ----编辑---- ||

Fiddle

HTML：

jQuery的：

CSS：