在菜单上悬停时显示特定Div上的图标

Question

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

Answer 1

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

Answer 2

这是一个小例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

此jQuery代码段会使用img类更改div的{​​{1}}元素的图标。它会从单个icon元素的data-icon参数中获取徽标。如果您使用鼠标（悬停）输入li元素，它将更改图标。如果你离开鼠标，它会回来。

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

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