Question

我目前有一个图库，可以在点击较小的图像时更改较大的图像。这是最重要的代码：

.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>

我无法弄清楚如何在onhover或onmouseover上发生这种情况。

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

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

Answer 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();
    });

Answer 2

我实际上找到了一种用纯CSS做到这一点的方法。我认为这是非常典型的，因为我被告知这是不可能的，似乎需要它。以下是此技术的源代码：

http://ostmosis.com/OnHoverChangeImage.zip

在缩略图的画廊上更改大图像

2 个答案: