HomeОбразованиеRelated VideosMore From: kudvenkat

jQuery mouse events

181 ratings | 42994 views
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 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'); } });
Html code for embedding videos on your blog
Text Comments (13)
DanezuBro (5 months ago)
Great video as always. Really enjoying the course !!!!!
Ahmet Yaman (1 year ago)
thank you sir
Amit kumar (2 years ago)
whats the difference between mouseenter and mouseover??
bra scene (2 years ago)
Thank you very much! Here's another way for displaying the help text, hope you like it :) var onOverPic; $("img").mouseover(function () { onOverPic = $(this).attr("id").substr(3, $(this).attr("id").length); $("div[id*='"+onOverPic+"']").fadeIn(500).removeAttr("style"); }) $("img").mouseout(function () { $("div[id*='" + onOverPic + "']").fadeOut(500).attr("style", "display:none"); })
Yury Gurevich (2 years ago)
hello Venkat. will try to help you as much as I can
Yury Gurevich (2 years ago)
Great Video as Always. Really enjoying the course and recommend to everyone I know
kudvenkat (2 years ago)
+Yury Gurevich I am very glad you found the videos useful. Thank you very much for taking time to give feedback. This means a lot. I have made free Dot Net & SQL Server training videos to help you become a successful web developer https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd Slides and Text Version of the videos can be found on my blog http://csharp-video-tutorials.blogspot.com Tips to effectively use my youtube channel. https://www.youtube.com/watch?v=y780MwhY70s If you want to receive email alerts, when new videos are uploaded, please subscribe to my youtube channel. http://www.youtube.com/subscription_center?add_user=kudvenkat If you like these videos, please click on the THUMBS UP button below the video. May I ask you for a favor. I want these tutorials to be helpful for as many people as possible. Please share the link with your friends and family who you think would also benefit from them. Thanks Venkat
Mukesh Chouhan (3 years ago)
i have watched your many tuts, and these are great thank you for making these tuts, i have one request could you please create a series on node.js, Thanks
Abdul Hannan (3 years ago)
Brilliant Sir
Boi-Hue La (3 years ago)
It is also possible to use the hide() method for replacing the fadeOut() method.
Rahul Srivastava (3 years ago)
thank you so much sir
Kuan Wei Lee (3 years ago)
you are so intelligent
Kuan Wei Lee (3 years ago)
OK. Thank you very much for reply ^^

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.