Question by Voldy: css hover on one element to change another element?
In the CSS, I have this:
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.
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.