悬停效果不工作后，jquery

我目前正在建立一个建筑公司，HLArchitects网站。在项目页面中，我创建了一个HTML/Javascript图片库。当你将鼠标悬停在一个更小的缩略图，从0.5到1 不透明度的变化可以看这里供参考：http://www.hla.co.za/projects/Hyuandai_Training_Centre/悬停效果不工作后，jquery

我的问题是，经过你点击缩略图较小的一个，从而改变上述大局观它，然后尝试将鼠标悬停在另一个较小的缩略图上，它不再改变不透明度。我用一个简单的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>

我真的很感激了一个解决这个让你点击后连悬停效果的工作原理其中一个缩略图。
预先感谢您

来源

2014-04-09 YSK .CO

半角冒号在点击函数结束时丢失 – Abhinav

当您使用javascript设置样式时，它们是内联的并覆盖样式表。相反，添加和删除一个类，问题将自行解决。虽然！ – adeneo

@ user2401175！但这不是问题在这里:) –

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

此外，您的网站有两个口主体标签和奇怪无效的标记。

来源

2014-04-09 17:31:46 adeneo

真的很感谢你的帮助。原因是我已经使用了一个php include（），我还没有正确格式化 –

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错误。否则，你会在循环运行;）

来源

2014-04-09 17:28:54

最初，当我在控制台运行此我得到这个错误：

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

看来你的脚本正在寻找在尚未加载DOM的东西。

当前proj.js正在查找尚未加载的元素。

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

来源

2014-04-09 17:55:09 squashriddle

悬停效果不工作后，jquery

回答

相关问题