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();
});

Answer 2

您的取消变量是一个问题，没有用，并且在 jquery 中使用悬停效果的正确结构

$("selector").hover(function(){
//do something when it is hover
},function(){
//do something when you lose hover
});

这是你第一次发帖的例子

$(".post1").hover(function() { $("div.surgedesc").show(); }, function() { $("div.surgedesc").hide(); });

您可以在此处阅读更多信息https://api.jquery.com/hover/