Question

我目前正在为一家建筑公司HLArchitects建立一个网站。在项目页面中，我创建了一个HTML / Javascript图库。将鼠标悬停在较小的缩略图上时，不透明度会从0.5更改为1。可在此处查看以供参考：http://www.hla.co.za/projects/Hyuandai_Training_Centre/

我的问题是，在您点击其中一个较小的缩略图后，它会更改其上方的大图，然后尝试将鼠标悬停在另一个较小的缩略图上，它不再会更改不透明度。我使用简单的CSS :hover来改变不透明度以及transition: opacity 0.2s。这是他缩略图的点击事件的Javascript / Jquery：

var imageFlow = document.getElementById("imageFlow");
var img = imageFlow.getElementsByTagName("img");

$("#imageFlow img").click(function(){
    var src = $(this).attr("src");
    if (src != $('#displayImg img').attr("src")){
        $('#displayImg img').fadeOut(200);
        setTimeout(function(){$("#displayImg img").attr("src",src);}, 200);
        $('#displayImg img').fadeIn(200);
    }

    for (var i = 0; i < img.length; i++) {
        $(img[i]).css("opacity","0.5");         
    }
    $(this).css("opacity","1");

})

HTML：

<div id="displayImg">
        <img src="images/095.jpg">
    </div>

    <div id="imageFlow">
        <img src="images/095.jpg" alt="095" width="" height="" />
        <img src="images/105.jpg" alt="105" width="" height="" />
        <img src="images/106.jpg" alt="106" width="" height="" />
        <img src="images/110.jpg" alt="110" width="" height="" />
        <img src="images/133.jpg" alt="133" width="" height="" />
        <img src="images/137.jpg" alt="137" width="" height="" />
        <img src="images/138.jpg" alt="138" width="" height="" />
        <img src="images/141.jpg" alt="141" width="" height="" />
        <img src="images/145.jpg" alt="145" width="" height="" />
        <img src="images/149.jpg" alt="149" width="" height="" />
        <img src="images/160.jpg" alt="160" width="" height="" />
        <img src="images/DSC_0077.jpg" alt="DSC_0077" width="" height="" />
        <img src="images/DSC_0091.jpg" alt="DSC_0091" width="" height="" />
        <img src="images/DSC_0092.jpg" alt="DSC_0092" width="" height="" />
        <img src="images/DSC_0093.jpg" alt="DSC_0093" width="" height="" />
        <img src="images/DSC_0252.jpg" alt="DSC_0252" width="" height="" />
        <img src="images/DSC_0357.jpg" alt="DSC_0357" width="" height="" />
        <img src="images/DSC_0360.jpg" alt="DSC_0360" width="" height="" />
        <img src="images/DSC_0380.jpg" alt="DSC_0380" width="" height="" />
    </div>

我真的很感激这个解决方案，以便即使您点击其中一个缩略图后悬停效果也能正常工作。
提前谢谢

Answer 1

var images = $("#imageFlow img");

images.on('click', function(){
    var src = $(this).attr("src");

    if (src != $('#displayImg img').attr("src")){
        $('#displayImg img').fadeOut(200, function() {
            $(this).attr("src", src).fadeIn(200);
        });
    }

    images.removeAttr('style');
    this.style.opacity = '1';
});

FIDDLE

此外，您的网站有两个开放的正文标记和奇怪的无效标记。

Answer 2

CSS：

#imageFlow img:hover,
#imageFlow img.active {
    opacity: 1;
}

JS：

var $img = $("#imageFlow").find("img");

$img.click(function(){
    var src = this.src;
    if (src != $('#displayImg img')[0].src){
        $(this).addClass('active').siblings('img').removeClass('active');
        $('#displayImg img').stop().fadeTo(200,0, function(){
             this.src = src;
             $(this).fadeTo(200, 1);
        });
    }
});

仔细查看HTML元素并修复未关闭的标记，重复的标记，重复的ID元素等，以及页面中控制台中弹出的其他JS错误。否则你将在循环中运行;）

Answer 3

最初，当我在控制台中运行时，我收到此错误：

TypeError: projs is null
var img = projs.getElementsByTagName('img');

您的脚本似乎正在寻找尚未加载的DOM中的内容。

目前，proj.js正在寻找尚未加载的元素。

您的脚本应该在页面底部运行，就像imageFlow.js一样。

Jquery之后悬停效果不起作用

3 个答案: