将鼠标悬停在文本链接上以更改图像 [英] hover on text link to change image

问题描述

我正在处理一个项目，需要制定一些简单的jquery文本翻转，更改其后的div中的图像。

I'm working on a project and need to work out some simple jquery for a text rollover that changes the image in the div behind it.

请参阅这里的想法 - http://sharifabraham.com/项目/

See the idea here - http://sharifabraham.com/projects/

我想让图片在中淡入：hover 小鼠叶子。

I would like the image to fade in on:hover and fade out when the mouse leaves. Each link on the nav will show the first image of the project.

有意义吗？

这是可能的吗？与css甚至？

Is this possible with css even?

推荐答案

这只是一个大纲你可以做什么。在悬停时，我们创建一个新的 img ，它将保存必要的图片并将其附加到#slider。新的 img 需要绝对定位才能出现在上一个图像的顶部（我们需要这个用于衰落）。当鼠标离开链接时，我们只需删除 img 。

This is just an outline of what you could do. On hover, we create a new img that will hold the necessary image and append it to #slider. The new img needs absolute positioning to appear on top of the previous image (we need this for fading). When mouse leaves the link, we just remove the img.

像这样更改HTML数据属性的URL）：

Change your HTML like this (add the corresponding image's URL to a data- attribute):

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

还有一些jQuery：

And some 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更改：

Also we need some CSS changes:

/* #hoverimage needs to appear on top of default image */
#slider { position: relative; }
#hoverimage { position: absolute; top: 0; left: 0; z-index: 100; }

注意：我没有考虑加载时间这些相当大的图像，我的代码假设他们已经缓存。你可以做一些预加载，或者只有当图像加载（ .load（））时开始渐变效果。如果我记得很好，后者在Opera中不可靠。

NOTE: I haven't taken into consideration the loading time for these quite big images, my code assumes they are already cached. You could either do some preloading, or only start the fading effects when the image has loaded (.load()). The latter is not reliable in Opera if I remember well.

这篇关于将鼠标悬停在文本链接上以更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！