鼠标悬停图像变化
Mouseover image change
我正在尝试在鼠标悬停时更改模糊图像。当其他东西放大时,像相机放大和缩小某些东西会变得模糊。理解我想要什么的最好方法是在这里看到它:
http://berger.co.rs/test/test.html
而且我只有一个问题。鼠标悬停图像始终位于活动图像后面。我只需要有活动图像,当应用鼠标悬停时,然后更改图像。另外,我不希望活动图像完全消失,然后加载鼠标悬停图像。我像上面的例子一样需要它,只是不要一直在后面显示鼠标悬停图像。
您可以在页面源代码中看到我的全部代码。
你能帮帮我吗?
首先欢迎来到 Whosebug,作为新用户,请阅读本指南,以便您更好地提问并获得更好更快的答案:
https://whosebug.com/help/how-to-ask
请避免在评论中使用代码。如果有人要求您提供其他代码,请将其包含在问题中。
现在答案:
问题只是您没有提供 Jquery 来使 $() 命令起作用。 "alturl.com/bcfhv" 不正确。
在这里,将其存档,它正在运行:
<html>
<body>
<style>
div{
position:relative;
width:714px;
height:420;
overflow:hidden;
}
span {
position:absolute;
top:0px;
left:-0px;
}
</style>
<div>
<img src="http://berger.co.rs/test/img/mouseover.png" width="714" height="421"/>
<span>
<img src="http://berger.co.rs/test/img/active.png" width="714" height="421"/>
</span>
</div>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
alert('ok')
$("div").hover(function() {
$("span").fadeIn();
}, function() {
$("span").fadeOut();
});
})
</script>
</body>
</html>
或者看到它工作 here
我正在尝试在鼠标悬停时更改模糊图像。当其他东西放大时,像相机放大和缩小某些东西会变得模糊。理解我想要什么的最好方法是在这里看到它: http://berger.co.rs/test/test.html
而且我只有一个问题。鼠标悬停图像始终位于活动图像后面。我只需要有活动图像,当应用鼠标悬停时,然后更改图像。另外,我不希望活动图像完全消失,然后加载鼠标悬停图像。我像上面的例子一样需要它,只是不要一直在后面显示鼠标悬停图像。
您可以在页面源代码中看到我的全部代码。
你能帮帮我吗?
首先欢迎来到 Whosebug,作为新用户,请阅读本指南,以便您更好地提问并获得更好更快的答案:
https://whosebug.com/help/how-to-ask
请避免在评论中使用代码。如果有人要求您提供其他代码,请将其包含在问题中。
现在答案:
问题只是您没有提供 Jquery 来使 $() 命令起作用。 "alturl.com/bcfhv" 不正确。
在这里,将其存档,它正在运行:
<html>
<body>
<style>
div{
position:relative;
width:714px;
height:420;
overflow:hidden;
}
span {
position:absolute;
top:0px;
left:-0px;
}
</style>
<div>
<img src="http://berger.co.rs/test/img/mouseover.png" width="714" height="421"/>
<span>
<img src="http://berger.co.rs/test/img/active.png" width="714" height="421"/>
</span>
</div>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
alert('ok')
$("div").hover(function() {
$("span").fadeIn();
}, function() {
$("span").fadeOut();
});
})
</script>
</body>
</html>
或者看到它工作 here