Javascript 悬停而不是单击时显示弹出窗口

我找到了一个关于添加弹出框的教程，但希望该框显示在悬停状态而不是单击状态。我如何修改此代码以实现此目的

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);
};

您可以在jQuery中使用以下方法：

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

第一个函数是当用户的鼠标进入时执行的方法，第二个函数将在用户的鼠标离开元素时触发

---

演示：

看看用“mouseover”和“mouseout”替换单击事件。用mouseover替换第一个“click”，用mouseout替换第二个“click”。这非常有效。非常感谢。还有什么方法可以禁用动画吗？@whistetter46-没问题，请接受这个答案。要禁用动画，可能需要删除以下行：

$（'.pop'）.slideFadeToggle（）

@whistetter46-要停止动画，请在

中取消选择
函数添加
$（此）.stop（）
或
$（'.pop'）.stop（）