Javascript jQuery悬停时显示/隐藏div（多模块实例）

我有6个缩略图，在一个单独的分区中有6个隐藏的标题。我想在悬停时显示相应的标题，然后在卷展栏上再次隐藏

目前，我已设法使用.hide使其工作；和.展示；方法，但如果用户在页面完全加载之前滚动了任何缩略图，则标题堆栈彼此重叠，并且似乎无法正确切换可见性

编辑-这里有一个我放在一起的例子，它显示了它的作用，但是我似乎无法复制这里看到的问题 在缩略图上方悬停时尝试刷新

我假设这与我如何调用与DOM相关的脚本有关——但我不确定我做错了什么——我对jQuery和Javascript的了解非常有限

缩略图：

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

非常感谢

您的取消变量对于每个悬停事件都不是唯一的，因为它似乎是您的意图。相反，它是一个与所有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>

---

cancel变量是一个问题，它没有用处，并且是jquery中使用悬停效果的正确结构

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

这是你第一篇文章的一个例子

$.post1.hover函数{ $div.surgedesc.show； }，功能{ $div.surgedesc.hide； };

---

你可以在这里阅读更多关于这方面的内容

你能把它放到一个Fiddle/JS文件箱中来演示你的问题吗？@MattD我现在就把它放在一起！同时，您可以看到这里的问题：我确实可以访问DOM标记。我确实认为重复那个代码是不好的做法，这更有意义。我将如何在代码中实现这一点？解决问题！谢谢

<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>

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

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