悬停在菜单上时在特定 div 上显示图标答案

【问题标题】：Display Icon on Specific Div When Hover on Menu悬停在菜单上时在特定 div 上显示图标
【发布时间】：2016-02-15 14:18:07
【问题描述】：

访问Icomooon.io并检查当我们将鼠标悬停在菜单ul上时显示图标的功能，另一个div上会出现一个图标。请向我发送他们的“悬停以在另一侧显示图标”功能的小提琴。

【问题讨论】：

我只需要它的javascript或jQuery函数。
看看 jQuery hover() Doc
但是从 hover() 开始，用户每次都会混淆图标。

标签： javascript jquery html css menu

【解决方案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 sn-p 将 div 的 img 元素的图标更改为 icon 类。它从单个 li 元素的 data-icon 参数中获取徽标。如果您使用鼠标（悬停）输入li 元素，它将更改图标。如果您离开鼠标，它会返回。

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

【讨论】：

感谢兄弟的帮助。
如果这对您有用，您可以考虑接受答案和/或投票。如果没有，您可以添加更多 cmets 来寻求可行的解决方案。

【解决方案2】：

你有没有检查过 jquery hoverIntent 插件？ http://cherne.net/brian/resources/jquery.hoverIntent.html

【讨论】：

还没有，但是这个插件会给用户带来每次改变图标类的困难。

【解决方案3】：

悬停更改图像的工作示例

Javascript

    $('#one').hover(function(){
    $('#iconHolder').empty().prepend('<img id="theImg" width="20" height="20" src="http://image005.flaticon.com/1/svg/109/109255.svg" />')
});
$('#two').hover(function(){
    $('#iconHolder').empty().prepend('<img id="theImg" width="20" height="20" src="http://image005.flaticon.com/1/svg/109/109099.svg" />')
});
$('#three').hover(function(){
    $('#iconHolder').empty().prepend('<img id="theImg" width="20" height="20" src="http://image005.flaticon.com/1/svg/109/109066.svg" />')
});

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<div id="iconHolder"></div>
<button id="one">one</button><button id="two">two</button><button id="three">three</button>

【讨论】：