Currently, I'm implementing an image zoom feature, and I want to incorporate two different mouse states for hover actions.
#1 Upon hovering over the containing <div>, the cursor should change to a 'plus' symbol.
#2 Once the user clicks on the image, the cursor should switch to a 'minus' symbol indicating that the image is now zoomed in. (while maintaining this state until clicked again)
#loop Clicking on the zoomed image should revert the cursor back to the plus symbol, which is the default hover-view.
I have ruled out using mousedown/up or :active as they do not fit my specific requirements. Therefore, I believe utilizing toggle is the most suitable approach.
As of now, I've attempted to implement this concept using the following code snippet: http://jsfiddle.net/fCe9B/. However, it does not function as intended. Depending on the positioning of the default hover image-call, either the toggle fails to replace the hover, or vice versa. My goal is to ensure both cursor states are displayed correctly. Can anyone assist me in resolving this issue?
CSS
.cursor {cursor:move;}
#box {height:300px;width:300px;background:blue;}
#box:hover {cursor:help;}
JQuery
$(document).ready(function(){
$("#box").click(function(){
$("#box").toggleClass("cursor");
});
});