javascript - 将鼠标悬停在菜单上时在特定 Div 上显示图标

Question

访问Icomooon.io并检查当我们将鼠标悬停在菜单 ul 上并且图标出现在另一个 div 上时显示图标的功能。请将带有“悬停以在另一侧显示图标”功能的 fiddle 发给我。

Answer 1

这是一个小例子:

$('ul li').hover(function() {
  // mouse enter
  var logo = $(this).attr("data-icon"); // get logo from data-icon parameter
  $('.icon img').attr("src", logo); // change logo
}, function() {
  // mouse left
  $('.icon img').attr("src", "http://placehold.it/50x50"); // remove logo
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="icon">
  <img src="http://placehold.it/50x50">
</div>
<ul>
  <li data-icon="http://lorempixel.com/50/50/"><a href="#">Item 1</a>
  </li>
  <li data-icon="http://lorempixel.com/50/50/"><a href="#">Item 2</a>
  </li>
</ul>

此 jQuery 代码段使用 icon 类更改了 div 的 img 元素的图标。它从单个 li 元素的 data-icon 参数中获取 Logo 。如果您使用鼠标(悬停)输入 li 元素，它将更改图标。如果您离开鼠标，它会返回。

请注意:在这个例子中只是占位符图像。您可以为此使用固定图像以使其按预期工作。