Forums

Chris Enloe

Im trying to figure out how to add a rollover affect to a box, so that when a user rolls over that specific box, an affect gets added to it, similar to a link. I've linked to a picture of what Im talking about. If anyone can help, it would be greatly appreciated.

http://i512.photobucket.com/albums/t328/Chris_Enloe/siteproblem.jpg

demersdesigns

Chris,
If this section will be wrapped in an anchor tag, you can use the hover pseudo class to change out the background or add a box-shadow in css. If it isn't wrapped in an anchor tag, you could use jQuery to accomplish the hover effect.

It really depends on how you are coding it and what kind of browser support you need. The jQuery hover route with css3 box shadow is probably the smartest way to go. Your IE viewers won't see the drop shadow, but it will still be perfectly usable.

Hope that helps,
Paul

Bob

You don't even need an anchor tag for that Chris, you can give a hover pseudo class to a div element as well, like this:

html:

<div id="test"></div>

css:

#test {	 width: 500px;
	 	 height: 200px;
	 	 background-color: gray;
	 }
#test:hover {	 border: 1px solid black;
	 	 }

So when you hover your mouse over the #test div, it gets a 1px solid black border.

zackw

ya u can definetly put a hover on divs or like

<button type="submit></button>

but i dont know how far down the ie line it goes, im gonna guess it stops working somewhere around 7

Bob

Check here to see if its supported: http://www.quirksmode.org/css/contents.html

Chris Enloe

I tried the pseudo class, and it didn't work. Then I made sure everything was right, and it still didn't work. I'll try again, and thanks everyone for the comments!

Bob

Could you please post your the code you're using then? Also, what browser did you test it in?

[Deleted User]

Isnt there a quotation missing in the div?

Bob

You're absolutely right, thanks! Fixed.
I just noticed there's one missing in @zackw's code as well.

Chris Enloe

I fixed my problem. It's one of those "starring at the code for 30 minutes" problems. Man, I do hate hate those kinds of mistakes..

treehouse : what would you like to learn today?

Forums

[Solved] Creating a rollover affect to a box