I was working on an app recently and one of the requirements was to change the background image position of a paragraph element using jQuery. The app had a deck of cards (images) laid one on top of the other and doing this in the application made a lot of sense. I cannot reveal much details about the app but in this post, I will show you how simple it is to change the position of an element’s background image in jQuery, when the mouse is hovered over it.
Use the following HTML where a paragraph has a background image as shown below:
.hover()method binds handlers for both
mouseleaveevents. We are simply adding behavior to the para element and changing the backgroundPosition when the mouseenter event occurs.
See a Live Demo