在缩略图的鼠标悬停上更改图库中的大图像答案

【问题标题】：Change large image in gallery onmouse over of thumbnails在缩略图的鼠标悬停上更改图库中的大图像
【发布时间】：2013-01-22 18:09:26
【问题描述】：

我目前有一个图库，当单击较小的图像时，它会更改较大的图像。这是最重要的代码：

.n1:focus span
{
background: url('images/Boot.png')
}

然后

<a class="thumb n1" href=# tabindex=1>
<img src=images/Boot.png><span>
<img src=""><br>Boot</span></a>

我不知道如何在悬停或鼠标悬停时实现这一点。

这是我需要的示例：http://thelittleappfactory.com/ripit/

有人有什么见解吗？我尝试使用 javascript 打开链接 onmousehover，但我的浏览器将其视为弹出窗口。

【问题讨论】：

标签： javascript hover gallery onmouseover jquery-hover

【解决方案1】：

首先，您需要有一个缩略图和一个大版本的图像。在您的代码中，您似乎只有一个图像。大图像应使用 css display:none 隐藏并绝对定位，以便它们都在彼此之上。我会使用 jquery 的 mouseenter 和 mouseleave 事件。 mouseover 事件在光标移动到元素上时触发，会产生过多的调用。

    <div class="item n1">
        <img class="thumb" src="images/boot_thumb.png" alt="boot/>
        <img class="big" src="images/boot_big.png" alt="boot/>
    </div>

这个 javascript 代码可以解决问题：

    $('item').mouseenter(function(){
        $(this).children('big').fadeIn();
    });

    $('item').mouseleave(function(){
        $(this).children('big').fadeOut();
    });

【讨论】：

我只有一张图片，但使用 css (class="thumb n1") 调整大小。我会试一试然后回来

【解决方案2】：

我实际上找到了一种使用纯 CSS 的方法。我认为这是非常惊人的，因为有人告诉我这是不可能的，而且似乎有必要这样做。以下是该技术的源代码：

http://ostmosis.com/OnHoverChangeImage.zip

【讨论】：