jQuery tutorial for beginners - jQuery mouse events

Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/04/jquery-mouse-events.html Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 In this video we will discuss jQuery mouse events If you want to follow along with the example, you will need the help image and the HTML that is available on my blog at the following link http://csharp-video-tutorials.blogspot.com/2015/04/jquery-mouse-events.html When the mouse is over the help icon, we want to display the help text, when the mouse is out, hide the help text. To achieve this mouseover and mouseout events can be used as shown below. $(document).ready(function () { $('img[src="help.png"]').mouseover(function () { $('#' + getDivId(this)).fadeIn(400); $(this).css('cursor', 'pointer'); }).mouseout(function () { $('#' + getDivId(this)).fadeOut(400); }); function getDivId(helpIcon) { var helpIconId = $(helpIcon).attr('id'); return helpIconId.replace('img', 'div'); } }); mouseenter and mouseleave events can also be used. $(document).ready(function () { $('img[src="help.png"]').mouseenter(function () { $('#' + getDivId(this)).fadeIn(400); $(this).css('cursor', 'pointer'); }).mouseleave(function () { $('#' + getDivId(this)).fadeOut(400); }); function getDivId(helpIcon) { var helpIconId = $(helpIcon).attr('id'); return helpIconId.replace('img', 'div'); } }); We can also achieve the same using hover. hover() function accepts two function arguments, one for mouseenter event and one for mouseleave event. $( selector ).hover( handlerIn, handlerOut ) is shorthand for $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut ) $(document).ready(function () { $('img[src="help.png"]').hover(function () { $('#' + getDivId(this)).fadeIn(400); $(this).css('cursor', 'pointer'); }, function () { $('#' + getDivId(this)).fadeOut(400); }); function getDivId(helpIcon) { var helpIconId = $(helpIcon).attr('id'); return helpIconId.replace('img', 'div'); } });