CSS3 and jquery implement hover effects that follow the mouse's direction

This article mainly introduces the CSS3 and jquery based on the mouse to follow the direction of the hover effect of the relevant information, the need for friends can refer to the following

Today we are going to learn how to create a hover effect that senses the mouse slide direction with CSS3 features and jquery. When the mouse slides in, the mask layer will slide in the direction of the last mouse slide, and when the mouse slides out, the mask layer will follow the mouse, slide out of the direction of the mouse. This is a very interesting effect.
We use an unordered list to organize thumbnails and describe the mask layer:

<ul id= "Da-thumbs" class= "da-thumbs" ><li><a href= "http://dribbble.com/shots/502538- Natalie-justin-cleaning "><p><span>natalie & Justin Cleaning by Justin younger</span></p></a></li><li><!--...--></li><!--...--> </ul>

These list items will float to the left and are relatively positioned because we are absolutely positioned to describe the mask layer:

. da-thumbs Li {float:left;margin:5px;background: #fff;p adding:8px;position:relative;box-shadow:0 1px 3px rgba (0,0,0, 0.1);}. Da-thumbs li a,.da-thumbs li a img {display:block;position:relative;}. Da-thumbs Li a {overflow:hidden;}. Da-thumbs Li a P {position:absolute;background:rgba (75,75,75,0.7); width:100%;height:100%;}

Next we will do this: depending on where the mouse enters, we apply the "from" style to the mask layer, which sets the initial position of the mask layer. Then we'll use the transition and add the final state to the style. So the mask layer slides in. When we leave the element, we apply the "from" style again to the mask layer (though it is now actually sliding out) and remove the previous final state style.

Well, here's the core of this little plugin:

this. $el-On (' Mouseenter.hoverdir, Mouseleave.hoverdir ', function (event) {var $el = $ (this), $hoverElem = $el. Find (' P ' ), direction = Self._getdir ($el, {x:event.pagex, y:event.pagey}), stylecss = Self._getstyle (direction), if (event. Type = = = ' MouseEnter ') {$hoverElem. Hide (). css (Stylecss.from); cleartimeout (self.tmhover); self.tmhover = SetTimeout (f Unction () {$hoverElem. Show (0, function () {var $el = $ (this), if (Self.support) {$el. css (' transition ', SELF.TRANSITIONP ROP);} Self._applyanimation ($el, stylecss.to, self.options.speed);} );}, Self.options.hoverDelay);} else {if (self.support) {$hoverElem. css (' transition ', self.transitionprop);} Cleartimeout (Self.tmhover); Self._applyanimation ($hoverElem, Stylecss.from, self.options.speed);}} );

We mainly bind the ' mouseenter ' and ' MouseLeave ' events to the list items, and through the _getdir function we get the direction in which the mouse slides in or out (the imagined detection area is a rectangle divided into four triangles).

As you'll see, in the second demo, we've added a delay so that when the mouse moves from one corner to another, there's not much animation going on.
I hope you can enjoy this little special effect and feel very useful!

jquery animations will be used if the browser does not support CSS transitions.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!