I had posted this question in Stack Overflow and they told me it would be better served on Code Review.
Is there a more effecient way of changing the mouseout state when a button is clicked? When a button is clicked I want the image in the click event to take precedence over the image in the mouseout event. The following code works but I'm not sure if nesting events is a good practice.
$("#targetBtn").on({
"mouseover" : function() {
$(this).find('img').attr('src', 'images/_hover.png');
},
"mouseout" : function() {
$(this).find('img').attr('src', 'images/_mouseout.png');
},
"click" : function() {
$(this).find('img').attr('src', 'images/_selected.png');
$(this).mouseout(function() {
$(this).find('img').attr('src', 'images/_selected.png');
});
}
});
If anyone could refactor this code and show me a better way of doing this it would be greatly appreciated. Also if someone could explain why nesting events is bad (if indeed it is) I would appreciate that as well.
querySelector
? \$\endgroup\$stackoverflow
that its a bad practice. Why is it a bad practice ifJQuery
is just a=
Javascript` library? \$\endgroup\$