将鼠标悬停在文本链接上可更改图像

Question

我正在做一个项目，需要制定出一些简单的jQuery的文本翻转，改变其背后的div图像。

请看这里的想法- http://sharifabraham.com/projects/

我希望图像淡入on:hover和淡出时，鼠标离开。导航上的每个链接都将显示项目的第一张图片。

讲得通?

使用CSS可以做到这一点吗？

Answer 1

这只是你可以做的事情的一个提纲。在悬停时，我们创建一个新的滑块，它将保存所需的图像并将其附加到# img。新的img需要绝对定位才能出现在前一个图像的顶部(我们需要这个来淡出)。当鼠标离开链接时，我们只需删除img。

如下所示更改HTML (将相应图像的URL添加到data- attribute中)：

<a class="hoverlink" data-img="../images/flinders_house.jpg" href="...

和一些jQuery：

var $slider=$('#slider'); //we save the slider
var $defaultimage=$('img', $slider); //and the default image

//mouseenter for the link
$('#projects .hoverlink').hover(function () { 
  var filename=$(this).attr('data-img'); //we get the filename from data-img

  $('<img id="hoverimage" src="'+filename+'" alt="" />')
    .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())。如果我没记错的话，后者在歌剧中是不可靠的。

Answer 2

Hmz考虑到我正确地理解了你想要的：

HTML

<ul id="nav">
    <li><h3><a href="ideas.html">IDEAS</a></h3></li>
    <li><h3><a href="projects.html">PROJECTS</a></h3></li>
    <li><h3><a href="studio.html">STUDIO</a></h3></li>
</ul>

JS

$("#nav").hover(function(){$('#slider').hide();}, function(){$('#slider').show()});