Hover Effect on Buttons

[SaikonoYume]

I'm working on a project for school, and we have to have an effect on our navigation that triggers when the mouse is hovering over one of the buttons. I've already set up a hover command for other links on the page, so I'm not quite sure exactly how to go about adding the effect to the buttons.

Please keep in mind that I'm fairly inept at CSS and HTML, so try to be specific if you have ideas.

[Twey]

It's fairly easy to do: simply specify the alternate style in the :hover pseudoclass.

.button {
  /* normal button style */
  color: red;
}

.button:hover {
  color: blue;
}

The only tricky bit is that for the hover effect to work in IE<7, the .button elements must be <a>s.

[SaikonoYume]

Essentially, that's what I want to do, however I have specific graphics I need to use. I have a graphic for the button when it's not being hovered over and one I want to use when it is being hovered over. And I apologize if the transition from what you gave me to what I want should be obvious.

[mburt]

.button {
  /* normal button style */
  background:url('path/to/normalImage.jpg');
}

.button:hover {
  background:url('path/to/hoverImage.jpg');
}

[pcbrainbuster]

Wait a second Twey -

Are you saying that the hover psuedo class only works in IE<=6 (JS expression)?

[mburt]

The hover class doesn't work in IE 6 and lower for everything besides the anchor element, you have to make annoying hacks.

[SaikonoYume]

Right, next stupid question: I put that up with all the other CSS codes, right?

[mburt]

Right, next stupid question: I put that up with all the other CSS codes, right?

And yes, you do.

[SaikonoYume]

Yeah, I'm totally inept. It didn't work.

[mburt]

You'll need to show your source code for us to help you.