Question

我正在尝试获取一组特定于页面的图标，以便在每个相应的菜单项都悬停时淡入。我找到了很少的方法，但我并不为他们感到骄傲。

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

关于如何让这个功能更小，更模块化的任何建议？我不习惯在DOM中使用那些相距甚远的东西，我通常只会使用CSS来做这样的事情。我应该使用一些数据属性将这些菜单项与其图像连接吗？

以下是代码的核心部分。我为了示例目的简化了它。

HTML

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

CSS

.hide {
  opacity: 0;
}

的jQuery

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

这*有效......但如果有100件物品怎么办？我觉得有一种超级光滑的做法。请赐教。最好的方法是什么？还有.hover（）很酷吗？我看到很多悬停样式 - 并没有真正的证据表明哪个是首选，我应该使用.on（）吗？

感谢您的时间。

哦，这是一个PEN

Answer 1

您可以在data-*自定义属性

中存储需要与锚点一起显示的内容

HTML

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

的jQuery

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

jQuery菜单.hover（）影响远在Dom /简化中的东西

HTML

CSS

的jQuery

1 个答案: