Hey, Hoping this isnt to hard to do? How can i change the background color or a <div> when the cursor goes over? Dor example: if i have a <div> that is width:500px; height:500px; with a background color of red. Is it possible to change it to blue if the visitor puts the mouse/cursor over it? Any ideas? if not possible in css how? thanks inadvance.
.block a { display: block; background-color: red; } .block a:hover { background-color: yellow; } try this.
It depends if you have <div id="block"> #block, or <div class="block"> .block Using a class is kind of better because you can assign the same class to unlimited elements on the page, but an ID has to be unique. That means that if you put id="block" on that div, you can't use its properties for, let's say, a table or a paragraf, or another div, you'll only have that div changing colors like that. If you use a class on it, then you can assign that class on several divs without complications div class="block", p class="block", etc. That leads to decreased size in your .css file, else you'd have a lot of #div filling useless space. Using id's: #div1 {color:#fff} #div2 {color:#fff} #div3 {color:#fff} OR using a class for all 3 of them: .div {color:#fff} .
All of the above has sense. Hmmm but my style is: CSS: .name a {display:block; color:#F00;} .name a:hover {display:block; color:#FFF;} <div class="name"> <a href="#">Change Color</a> </div> This is the basic and this will works even on IE6. If you want to hove on div it self, better use javascripts. though if not needed use CSS Hope this helps...