将鼠标hover在文本链接上以更改图像
我正在研究一个项目,需要为一个文本翻转计算出一些简单的jquery,它会改变它背后的div中的图像。
在这里看到这个想法 – http://sharifabraham.com/projects/
我希望图像淡入on:hover
当鼠标离开时on:hover
并淡出。 导航器上的每个链接都将显示项目的第一个图像。
合理?
即使是css也可以吗?
这只是您可以做的事情的概述。 在hover时,我们创建一个新的img
,它将保存必要的图像并将其附加到#slider。 新的img
需要绝对定位才能出现在上一个图像的顶部(我们需要这个用于淡入淡出)。 当鼠标离开链接时,我们只需删除img
。
像这样更改HTML(将相应图像的URL添加到数据属性):
') .appendTo($slider).fadeIn(500); //append and fade in new image (#hoverimage) $defaultimage.fadeOut(500); //fade out default image }, //mouseleave for the link function () { $('#hoverimage').fadeOut(500, function () { //fade out #hoverimage $(this).remove(); //when animation is done, remove it }); $defaultimage.fadeIn(500); //meanwhile fade in original image });
我们还需要一些CSS更改:
/* #hoverimage needs to appear on top of default image */ #slider { position: relative; } #hoverimage { position: absolute; top: 0; left: 0; z-index: 100; }
注意 :我没有考虑这些非常大的图像的加载时间,我的代码假设它们已经被缓存。 您可以执行一些预加载,也可以仅在加载图像时启动淡入淡出效果( .load()
)。 如果我记得很清楚,后者在Opera中并不可靠。
Hmz考虑到我理解你想要这个:
HTML
JS
$("#nav").hover(function(){$('#slider').hide();}, function(){$('#slider').show()});