Javascript jQuery menu.hover（）来影响Dom/simplify中远处的内容

我试图让一组特定于页面的图标在其对应的菜单项悬停在上方时淡入。我找到了一些方法，但我并不为此感到骄傲

简单地说，你在一个页面上，所以“我们”-默认情况下它有一个页面图标-因此，让我们说一类-菜单项上的.current page-和当前页面图标img上的.active page icon。当菜单项悬停时，假设它不是当前页面的菜单项，同时淡出当前图像并淡入与悬停菜单项相关联的图像。鼠标悬停时，淡出该图像并淡入默认图像

关于如何使这个函数更小、更模块化，有什么建议吗？我不习惯处理DOM中相距甚远的东西，我通常只使用CSS来处理类似的事情。我应该使用一些数据属性将这些菜单项与其图像连接起来吗

下面是代码的核心部分。为了举例，我简化了它

HTML jQuery 这……行得通。。。但是如果有100件或更多的东西呢。我有一种感觉，这是一种非常巧妙的方法。请开导我。最好的办法是什么？还有，.hover（）酷吗？我看到了很多悬停样式，但没有真正的证据表明哪一种是首选的，我应该使用.on（）

谢谢你抽出时间

---

哦，这里有一个

您可以在

数据-*

自定义属性中存储需要显示的内容

HTML

---

我看到过构建jquery框架，然后将所有内容连接在一起，就像这篇文章中所说的：走向底层我的文章标题非常糟糕，如果有人想到更好的，请告诉我。哇。这正是我所希望的。非常感谢你。迫不及待地想了解更多这方面的信息。你知道有什么警告吗？支持看起来相当可靠：@sheriffderek，我使用了和HTML5自定义数据属性的组合，为所有支持它的浏览器干杯

<div class="container splash">
  <div class="inner-w">

    <ul class="menu">
      <li><a href="#" id="us-hover" class="current-page">Us</a></li>
      <li><a href="#" id="work-hover">Work</a></li>
      <li><a href="#" id="books-hover">Books</a></li>
    </ul>

  </div>
</div>

<div class="page-icon">
  random place far away in the DOM
   <div class="image-w">

    <img class="us-image active-page-icon" src="http://placehold.it/400x400&text=Us" alt="" />
    <img class="work-image hide" src="http://placehold.it/400x400&text=Work" alt="" />
    <img class="books-image hide" src="http://placehold.it/400x400&text=Books" alt="" />

  </div>
</div>

.hide {
  opacity: 0;
}

$("#us-hover").hover(
  function() {
    $(".active-page-icon").addClass("hide"),
    $(".us-image").removeClass("hide");
  }, function() {
    $(".us-image").addClass("hide");
    $(".active-page-icon").removeClass("hide");
  }
);

$("#work-hover").hover(
  function() {
    $(".active-page-icon").addClass("hide"),
    $(".work-image").removeClass("hide");
  }, function() {
    $(".work-image").addClass("hide");
    $(".active-page-icon").removeClass("hide");
  }
);

$("#books-hover").hover(
  function() {
    $(".active-page-icon").addClass("hide"),
    $(".books-image").removeClass("hide");
  }, function() {
    $(".books-image").addClass("hide");
    $(".active-page-icon").removeClass("hide");
  }
);

<ul class="menu">
  <li><a href="#" id="us-hover" data-display-item='.us-image' >Us</a></li>
  <li><a href="#" id="work-hover" data-display-item='.work-image' >Work</a></li>
  <li><a href="#" id="books-hover" data-display-item='.books-image' >Books</a></li>
</ul>

$("#menu li a").hover(function() {
    $(".active-page-icon").addClass("hide"),
    $($(this).data('display-item')).removeClass("hide");
}, function() {
    $($(this).data('display-item')).addClass("hide");
    $(".active-page-icon").removeClass("hide");
});