Blog Six: jQuery mouseenter() and mouseleave()

I would like to dig deep into the website I analyzed in Blog 5, where I explained why I like the design style. There are many jQuery skills that I want to learn from it and apply to my own website, among which, I found that MouseEnter() and MouseLeave() is very practical.

When I hover mouse over the circle, it will turn to pink from dark grey, the font will be white from black, and the size will be bigger.

jquery

The effect is to execute an activity when hover mouse over the element or move the mouse out of the element. I grab this part of codes which contain this function

{var p,f,m=0,v=0,y=0;s.on({“touchstart.houdini mousedown.houdini”:function(t){var e=u.getEvent(t);m=e.pageX},”touchmove.houdini mousemove.houdini”:function(t){var e=u.getEvent(t);y=e.pageX-function(){return p||m}(),p=e.pageX,f=Date.now()},”touchend.houdini touchcancel.houdini mouseup.houdini”:function(){endTime=Date.now(),deltaTime=endTime-f,v=Math.abs(p-m),500>deltaTime&&v>50&&(t.isFunction(o.onManualNav)&&o.onManualNav(),y>0?s.previous():0>y&&s.next())}})}o.autoPlay&&(s.play(),o.pauseOnHover&&(s.on({“mouseenter.houdini”:s.pause,”mouseleave.houdini”:s.play})

“houdini” is an animation library, which determines the details of colors, fonts and sizes. The jQuery part is to via MouseEnter and MouseLeave function.

w3school introduced the difference of MouseOver and MouseEnter: Unlike the mouseover event, the mouseenter event only triggers when the mouse pointer enters the selected element. The mouseover event is triggered if a mouse pointer enters any child elements as well.

The fundamental format of the event is:

$(document).ready(function(){
$(“p”).mouseenter(function(){
$(“p”).css(“background-color”, “yellow”);
});
$(“p”).mouseleave(function(){
$(“p”).css(“background-color”, “lightgray”);
});

These code will trigger the background-color from lightgray when it’s still to yellow when it’s hovered over.

Advertisements

About Yizhu Wang

A second-year graduate student in Missouri School of Journalism. She studies print/digital journalism with a focus on business reporting. She is interested in utilizing multimedia and technology to strengthen the presentation of news stories. Yizhu is originally from Shanghai, China.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s