[Solved] Creating a rollover affect to a box

[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:

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

	

		

		
		#79274

		
		
		
	

[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?

[Chris Coyier]

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..

[Author]

Posts