CSS question

LD · 2011-02-09, 12:10 PM

I think I have seen this, but I can't figure out how to do it (assuming it's possible).

I want to make a div change backgrounds using 'hover'. I can make the linked text within the div do it, but I want the entire div to change. Can that be done?

cd34 · 2011-02-09, 01:11 PM

Code:

<style>
.hoverme { background: #ccc; width: 300px; height: 100px;}
.hoverme:hover { background: #f33; }
</style>
<div class="hoverme">test
test
<a href="http://google.com/">Google</a>
test
</div>

It is the same as doing an <a> tag, you just apply the hover styling to the block you want.

LD · 2011-02-09, 02:57 PM

Quote:

Originally Posted by cd34

Code:

<style>
.hoverme { background: #ccc; width: 300px; height: 100px;}
.hoverme:hover { background: #f33; }
</style>
<div class="hoverme">test
test
<a href="http://google.com/">Google</a>
test
</div>

It is the same as doing an <a> tag, you just apply the hover styling to the block you want.

YES perfect. (I was very close

)

2011-02-09, 12:10 PM	#1
LD wtfwjd? Join Date: May 2007 Posts: 2,103	CSS question I think I have seen this, but I can't figure out how to do it (assuming it's possible). I want to make a div change backgrounds using 'hover'. I can make the linked text within the div do it, but I want the entire div to change. Can that be done? __________________ Artisteer Wordpress Theme Generator Create Custom Themes! My Little Network

2011-02-09, 01:11 PM	#2
cd34 a.k.a. Sparky Join Date: Sep 2004 Location: West Palm Beach, FL, USA Posts: 2,396	Code: <style> .hoverme { background: #ccc; width: 300px; height: 100px;} .hoverme:hover { background: #f33; } </style> <div class="hoverme">test test <a href="http://google.com/">Google</a> test </div> It is the same as doing an <a> tag, you just apply the hover styling to the block you want. __________________ SnapReplay.com a different way to share photos - iPhone & Android