Jquery之后悬停效果不起作用

hover effect not working after Jquery

本文关键字：不起作用 悬停 之后 Jquery      更新时间：2023-09-26

我目前正在为一家建筑公司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>

我真的很感激有一个解决方案，这样即使你点击了其中一个缩略图，悬停效果也能发挥作用
提前感谢

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

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

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错误。否则，您将在循环中运行；）

最初，当我在控制台中运行此程序时，我会收到以下错误：

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

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

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

脚本应该像imageFlow.js.

一样在页面底部运行
相关文章：