0

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

.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，但我的浏览器将其视为弹出窗口。

4

2 回答 2

0

首先，您需要有一个缩略图和一个大版本的图像。在您的代码中，您似乎只有一个图像。大图像应使用 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();
    });
于 2013-01-22T19:07:20.807 回答
0

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

http://ostmosis.com/OnHoverChangeImage.zip

于 2013-01-23T02:39:04.510 回答