css hover on one element to change another element?

Question by Voldy: css hover on one element to change another element?
Hello, I’m working on a navigation splash page. There is a top header with a logo, and two links underneath. I want it so that when you hover over one of the links, the logo above the links changes color. I’m running into a problem, and I’m not sure if I can do this with pure CSS or if I need something else like some javascript or jquery.

In the CSS, I have this:


#link1:hover #logo{

The links underneath the logo are animated rollovers. I wrapped each one in its own DIV id. So the HTML is basically:

The img code is a bit more complicated than this, since it is an animated rollover, but I wrote it this way for simplicity’s sake. So basically, I want it so that when you hover over the link, the logo image changes. Move your mouse away, and it goes back to normal. But it doesn’t change anything and I’m assuming it is because they are not under a parent element so one can’t modify the other.

Is there any other way to do this? I’ve been trying to find another solution but I’m not sure where to start really. Any help would be immensely appreciated.
Oh and just as a response to the IDE question, I don’t use IDEs, I just code from scratch.

Best answer:

Answer by Grant
What IDE are you using? If you’re using Dreamweaver, this is a very simple task.

1. Choose the object you want to rollover to control the changed image.
2. Then use the tag inspector (option+shift+F9) and choose behaviors.
3. Add a new behavior: Swap Image
4. Select the image you want to swap out for a new one (it helps to put ID names on your images)
5. Select the image you want to replace it with.
6. Be sure to check the box that says “Restore images onMouseOut”
7. Press OK, save, and preview your wonderful creation.

Add your own answer in the comments!


There are no revisions for this post.

Tags: , , ,

One Response to “css hover on one element to change another element?”

  1. skii January 10, 2012 at 8:06 PM #

    With the code: #link1:hover #logo
    it finds #logo inside #link1; but since #logo is outside #link1, this won’t work.

    In handling events across same-level elements, I’d prefer Javascript. In my experience with scenarios like this, I use (and highly prefer) jQuery ( http://www.jquery.com/ ) and since you want to play on hover events, you might want to check here ( http://api.jquery.com/hover/ ) — plus it has cool effects!

    Have fun using and learning more Javascript! However, I suggest you to really learn the codes and rely less on IDEs. 🙂

Leave a Reply