【问题标题】: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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-02-20
      • 1970-01-01
      • 1970-01-01
      • 2012-11-15
      • 1970-01-01
      • 2019-08-06
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多