Hover over one element affect another?

Question

Take a look: a link . You can see that the icons at the top menu bar turn blue when you hover over it and also, the page links below it turn white when you hover over them... I would like for both of them to do their hover effect when you mouseover one or the other... In essence, I would like the icons to turn blue when you hover over the page links and I would like the page links to turn white when you hover over the icons (obviously I want the only the icon above the page link to light up when it's appropriate page link is being hovered and vice a versa).

I am using jquery for the image hover effect...

and the page link code is just a simple css hover a code. I would like for these two to be linked together as one unit somehow.

I was also wondering if the icon could stay lit up after clicking it (TO show which page you are on)...

ALSO...

I have a problem where when the website is minimized into a smaller window... when you horizontally scroll... the wrapper gets cut off and all you see is white space! I've played around with it alot and it was no use! I did a float left, but then I couldn't center it!

If anybody could help out with these two problems, it would be greatly appreciated!

Answer 1

Using javascript to swap images is pretty old-hat. You should probably consolidate the img and a into a single element and use a css hover selector to swap the background-image ( like so ).

[Edit] : Here's an example using css-sprites. If you're going to use sprites, you should probably combine all of those nav images into one image to conserve http requests.

Answer 2

This isn't too difficult to achieve. Instead of using a:hover , use li:hover a , which will work when you hover over any part of the <li> , whether it's the link or the image.

Preview: http://jsfiddle.net/Wexcode/FZjzG/

As you can see, I actually removed your image tag and placed it as a background image inside of your <a> tag. This technique is much better than using images and jQuery.

If you like using this technique, there are better ways of doing it. Read up on CSS Sprites if you're interested in learning more.

---

Edit:
To add your current state, you have two ways of going about it. An easy way would just be to add the class current to the navigation item that is the "current" page.

See: http://jsfiddle.net/Wexcode/FZjzG/1/

---

Please post your other problem in another question... you should try to keep one question to each post.