CODEWITHSUNDEEP
javascriptjquery
Whisetter46
Whisetter46

Reputation: 35

Show popup on hover rather than on click

I found a tutorial on adding popup boxes but want the box to appear on hover rather than on click. How can I alter this code to do that?

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

Upvotes: 2

Views: 360

Answers (1)

Darren
Darren

Reputation: 70718

You can use the hover() method in jQuery:

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

The first function is the method that will execute when the user's mouse enters, and the second function will be fired when the user's mouse leaves the element.

Demo: https://jsfiddle.net/2hLjs4qt/

Upvotes: 3

Related Questions