The example in this article describes how js implements background image sensing mouse changes. Share it with everyone for your reference. The specific analysis is as follows:
The background image changes after a mouse click. Clicking in front of another menu item will automatically restore the background. In fact, this cannot be done by simply using CSS. We also need to use JS to determine the mouse status. The code is as follows:
<style type="text/css"> .dh a{ background:#FFFFCC; width:50px; height:30px; display:block; text-align:center; color:#000000; } .dh a:hover{ background:#FF9900; } </style> </head> <body> <div> <div class="dh"><a href="#">导航1</a></div> <div class="dh"><a href="#">导航2</a></div> <div class="dh"><a href="#">导航3</a></div> <div class="dh"><a href="#">导航4</a></div> <div class="dh"><a href="#">导航5</a></div> </div> <script type="text/javascript"> $(function(){ $(".dh a").click(function(){ $(".dh a").removeAttr("style"); $(this).attr("style","background:#CCFF99;"); }) }) </script>
I hope this article will be helpful to everyone’s JavaScript programming design.