在懸停而不是點擊時顯示彈出框

Question

我發現了一個關於添加彈出框的教程，但希望框在懸停而不是點擊時出現。我怎樣才能改變這個代碼來做到這一點？

function div_show() { 
    document.getElementById('abc').style.display = "block"; 
} 

function deselect(e) { 
    $('.pop').slideFadeToggle(function() { 
    e.removeClass('selected'); 
    }); 
} 

$(function() { 
    $('#youtube').on('click', function() { 
    if ($(this).hasClass('selected')) { 
     deselect($(this)); 
    } else { 
     $(this).addClass('selected'); 
     $('.pop').slideFadeToggle(); 
    } 
    return false; 
    }); 

    $('.close').on('click', function() { 
    deselect($('#youtube')); 
    return false; 
    }); 
}); 

$.fn.slideFadeToggle = function(easing, callback) { 
    return this.animate({ 
    opacity: 'toggle' 
    }, 'fast', easing, callback); 
}; 

Answer 1

您可以在jQuery中使用hover()方法：

$("#youtube").hover(function(){ 
    $(this).css("background-color", "yellow"); 
    }, function(){ 
    $(this).css("background-color", "blue"); 
}); 

第一個功能是當用戶的鼠標進入將執行方法，而第二個函數將被解僱當用戶的鼠標離開元素。

演示：https://jsfiddle.net/2hLjs4qt/