CSS3 and jQuery implement Hover effects that follow the mouse direction

This article mainly introduces the relevant information about the Hover effect that follows the mouse direction based on CSS3 and jQuery. Friends in need can refer to it

Today we will learn how to create a Hover effect through the characteristics of CSS3 and jQuery. Perceive the hover effect of the mouse sliding direction. When the mouse slides in, the mask layer will slide in from the direction of the last mouse slide out. When the mouse slides out, the mask layer will follow the mouse and slide out from the direction of the mouse slide out. This is a very interesting effect.
We use an unordered list to organize the thumbnails and describe the mask layer:

<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
<img src="images/7.jpg" />
<p><span>Natalie & Justin Cleaning by Justin Younger</span></p>
</a>
</li>
<li>
<!-- ... -->
</li>
<!-- ... -->
</ul>

These list items will float to the left and be positioned relatively, Because we absolutely position the mask layer: Mask layer, which sets the initial position of the mask layer. Then we're going to use transitions and will add styles for the final state. This way the mask layer will slide in. When we leave the element, we apply the "from" style to the mask layer again (although now it actually slides out) and remove the previous final state style.

Well, the following is the core of this small plug-in:

.da-thumbs li {
float: left;
margin: 5px;
background: #fff;
padding: 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%;
}

We mainly bind 'mouseenter' and 'mouseleave' event, through the _getDir function we get the direction in which the mouse slides in or out (imagine the detection area is a rectangle divided into four triangles).

You will see that in the second demo, we added a delay so that not much animation occurs when the mouse moves from one corner to another.

I hope you like this little special effect and find it useful!

If the browser does not support CSS transitions, jQuery animation will be used.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

jQuery How to implement a sliding button switch

How does JavaScript determine whether the browser supports CSS3 attributes? support

The above is the detailed content of CSS3 and jQuery implement Hover effects that follow the mouse direction. For more information, please follow other related articles on the PHP Chinese website!