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

Question

我在一个单独的 div 中有 6 个缩略图和 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();
});