javascript - jQuery 在悬停时显示/隐藏 div(多个实例)

Question

我有 6 个缩略图，其中一个单独的 div 中有 6 个隐藏标题。我想在悬停时显示相应的标题，并在推出时再次隐藏它。

目前，我已经设法使用 .hide(); 和 .show(); 方法使其工作，但如果用户滚动了任何在页面完全加载之前，缩略图的缩略图堆叠在一起，并且似乎无法正确切换可见性。

编辑 - 这是 fiddle我把它放在一起，显示了它的实际作用，但是我似乎无法复制这里看到的问题 http://2xdare.co/projects/ (尝试将鼠标悬停在缩略图上时刷新)

我认为这与我如何调用与 DOM 相关的脚本有关 - 但我不确定我做错了什么(我对 jQuery 和 Javascript 的了解非常有限)

缩略图:

<a class="imagelink post1" href=""><div class="thumb"></div></a>

标题:

<div class="caption-container">
    <div class="projectcaptions hide-mobile">
      <div class="surgedesc">
        <h3>Title</h3>
        <p class="fields">Field captions</p>
        <p class="captions">Captions</p>
      </div>
    </div>
<div>

jQuery:

jQuery(document).ready(function($) {


//  Mobile Nav
jQuery(function($){
         $( '#nav-toggle' ).click(function(){
             $('.responsive-menu').toggleClass('expand')
             $('.main-header').toggleClass('blackout')
         })
    });
//  Coverfade element
$(window).scroll(function(i){
    var scrollVar = $(window).scrollTop();
    $('.coverelement, #arrow').css({
        'opacity':( 300-$(window).scrollTop() )/300
    });
});

//  CAPTION ROLLOVER
$(window).load(function(){
    var cancel = false;
    $("div.surgedesc").hide();
    $(".post1").hover(function(){
        cancel = (cancel)?false: true;    
        if(!cancel){
        $("div.surgedesc").hide();
        }
        else if(cancel){
        $("div.surgedesc").show();
        }    
    });
    var cancel = false;
    $("div.linierdesc").hide();
    $(".post2").hover(function(){
        cancel = (cancel)?false: true;    
        if(!cancel){
        $("div.linierdesc").hide();
        }
        else if(cancel){
        $("div.linierdesc").show();
        }    
    });
    var cancel = false;
    $("div.we-are-foreverdesc").hide();
    $(".post3").hover(function(){
        cancel = (cancel)?false: true;    
        if(!cancel){
        $("div.we-are-foreverdesc").hide();
        }
        else if(cancel){
        $("div.we-are-foreverdesc").show();
        }    
    });
    var cancel = false;
    $("div.worth-popupdesc").hide();
    $(".post4").hover(function(){
        cancel = (cancel)?false: true;    
        if(!cancel){
        $("div.worth-popupdesc").hide();
        }
        else if(cancel){
        $("div.worth-popupdesc").show();
        }    
    });
    var cancel = false;
    $("div.walk-the-linedesc").hide();
    $(".post5").hover(function(){
        cancel = (cancel)?false: true;    
        if(!cancel){
        $("div.walk-the-linedesc").hide();
        }
        else if(cancel){
        $("div.walk-the-linedesc").show();
        }    
    });
    var cancel = false;
    $("div.the-looking-glassdesc").hide();
    $(".post6").hover(function(){
        cancel = (cancel)?false: true;    
        if(!cancel){
        $("div.the-looking-glassdesc").hide();
        }
        else if(cancel){
        $("div.the-looking-glassdesc").show();
        }    
    });


}); 
}); 

非常感谢!

Answer 1

您的cancel变量对于每个悬停事件来说并不是唯一的，因为它看起来是意图。相反，它是所有 6 个部分共享的单个变量。

您有权访问 DOM 标记吗？我发现在 HTML 本身中定义自定义属性并让 JS 在需要时使用该值更易于维护:

<div class="caption-container">
    <div class="projectcaptions hide-mobile">
      <div data-showonhover=".post1">...</div>
      <div data-showonhover=".post2">...</div>
      <div data-showonhover=".post3">...</div>
      <div data-showonhover=".post4">...</div>
    </div>
<div>

然后您可以使用此自定义属性找到任何元素，并在悬停时toggle()目标:

$("[data-showonhover]").hover(function(){
    $($(this).data("showonhover")).toggle();
});