javascript - Jquery 后悬停效果不起作用

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

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