Javascript 当鼠标悬停在菜单上时，在特定Div上显示图标

当我们将鼠标悬停在菜单

ul

上，另一个

div

上出现一个图标时，请访问并检查显示图标的功能。请给我他们的“悬停在另一边显示图标”功能的小提琴

您是否曾经检查过jquery hoverIntent插件？

---

以下是一个小例子：

$（'ulli'）。悬停（函数（）{
//鼠标进入
var logo=$（this）.attr（“数据图标”）；//从数据图标参数获取徽标
$（'.icon img'）.attr（“src”，logo）；//更改logo
}，函数（）{
//鼠标左键
$（'.icon img'）.attr（“src”http://placehold.it/50x50“”；//删除徽标
});






悬停更改图像的工作示例

Javascript

$（'#一'）。悬停（函数（）{
$（'#iconHolder'）.empty（）.prepend（''）
});
$（'#two'）。悬停（函数（）{
$（'#iconHolder'）.empty（）.prepend（''）
});
$（'#三'）。悬停（函数（）{
$（'#iconHolder'）.empty（）.prepend（''）
});

HTML


一二三
我只需要它的javascript或jQuery函数。看看jQuery
hover（）
但是，每次从hover（）开始，用户都会对更改图标感到困惑。现在还没有，但是这个插件会给用户每次更改图标类带来困难。感谢bro的帮助。如果这对您有效，你可以考虑接受答案和/或否决它。如果没有，您可以添加更多注释，要求提供有效的解决方案。
    $('#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" />')
});

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