A Simple Mouseover Hover Effect with jQuery
A Simple Mouseover Hover Effect with jQuery
To make it all work, we first need to add the jQuery library script between the tags.
<script src=”http://yoursite.com/jquery.js” type=”text/javascript”>
</script></div>
Now lets create the function that will make it all work.
To make it all work, we first need to add the jQuery library script between the tags.
<script src=”http://yoursite.com/jquery.js” type=”text/javascript”>
</script></div>
Now lets create the function that will make it all work.
<script type='text/javascript'>
$(document).ready(function(){
$(".button").hover(function() {
$(this).attr("src","button-hover.png");
}, function() {
$(this).attr("src","button.png");
});
});
</script>
The one thing you need to make sure is that the classname in the jQuery
function (.button) matches the classname of the image tag (button).
<img src="button.png" alt="My button" class="button" />
