將鼠標懸停在菜單上時在特定Div上顯示圖標

Question

當我們將鼠標懸停在ul菜單上並且另一個div上出現一個圖標時，請訪問Icomooon.io並檢查顯示圖標的功能。 請把他們的“懸停在另一側顯示圖標”功能發送給我。

Answer 1

您是否曾經檢查過jquery hoverIntent插件？ http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 2

這是一個小例子：

 $('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元素的icon 。 它從單個li元素的data-icon參數中獲得徽標。 如果使用鼠標（懸停）輸入li元素，它將更改圖標。 如果離開鼠標，它將返回。

請注意：在此示例中只是占位符圖像。 您可以為此使用固定圖像，以使其按預期工作。

Answer 3

懸停更改圖像的工作示例

Java腳本

    $('#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>