在悬停而不是点击时显示弹出框

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/