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/

jQuery在悬停时显示/隐藏div（多个实例）

2 个答案: