I’m making a simple navigation menu for a site. You create an ul with id menu, and should be pretty simple from there. I have some simple css to give all the lis the correct background image, then some jQuery to change the look of an li when the user mouses over. It works pretty well, but there’s one problem. When the user clicks on a link directly, rather than clicking in the box around it, and then uses the browser’s back button, things go wrong. When the user hovers over this time, the entire li goes completely blank, but it’s fine once the user mouses away. Does anyone know what may cause this strange behavior? (Note, every once in a while, mousing over causes a li to flicker, especially if it’s one of the bottom two lis. I thought this was normal, but maybe it could be helpful in diagnosing the problem.)
<html> <head> <title>Menu Test</title> <style type='text/css'> ul#menu{width: 185px; margin: auto; text-align: center; color: #fff; list-style-type: none;} ul,li,h2{padding: 5px 0 0 0; margin: 0;} li h2{height: 49px; background: url('top.png'); vertical-align: middle;} li.link{height: 30px; background: url('link.png');} li.link a{color: white; text-decoration: none;} li.bottom{height: 25px; background: url('bottom.png');} </style> <script src='jquery.js' type='text/javascript'></script> <script type='text/javascript'> $(document).ready(function(){ $('.link').mouseover(function(){ //highlight on mouseover $(this).css({background: 'url('file:///Users/J/Desktop/DHTML/Menu/linkselect.png')'}); }) $('.link').mouseout(function(){ //un-highlight on mouseout $(this).css({background: 'url('./link.png')'}); }) $('.link').click(function(){ //go to site on click, even if click isn't on link window.location = $(this).find('a').attr('href'); }) }) </script> </head> <body> <ul id='menu'> <li><h2>Menu</h2></li> <li class='link'><a href='http://google.com/'>Google</a></li> <li class='link'><a href='http://norwegianrecycling.multiply.com/'>Norwegian Recycling</a></li> <li class='link'><a href='http://www.jquery.com/'>jQuery</a></li> <li class='link'><a href='http://www.apple.com/'>Apple</a></li> <li class='link'><a href='http://www.ubuntu.com'>Ubuntu</a></li> <li class='link'><a href='http://www.firefox.com/'>Firefox</a></li> <li class='link'><a href='http://www.youtube.com/'>YouTube</a></li> <li class='bottom'></li> </ul> </body> </html>
You know you can do everything you’re doing there with just CSS and HTML?
atodisplay:blockso that it fills theli:hoverstate on a to change the background.