css advice please????

Discussion in 'CSS' started by darrens, Sep 25, 2010.

  1. #1
    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.
     
    darrens, Sep 25, 2010 IP
  2. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #2
    .block a { display: block; background-color: red; }
    .block a:hover { background-color: yellow; }

    try this.
     
    radiant_luv, Sep 25, 2010 IP
  3. Abh

    Abh Active Member

    Messages:
    162
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    60
    #3
    why not
    .block {background-color: red; }
    .block:hover { background-color: yellow; } ?
     
    Abh, Sep 26, 2010 IP
  4. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #4
    That should even work :) however i guess old browsers not.
     
    radiant_luv, Sep 26, 2010 IP
  5. extremephp

    extremephp Peon

    Messages:
    1,290
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    0
    #5
    One thing more why not #?

    ~ExP~
     
    extremephp, Sep 26, 2010 IP
  6. Abh

    Abh Active Member

    Messages:
    162
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    60
    #6
    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}
    .
     
    Abh, Sep 26, 2010 IP
  7. alfieindesigns

    alfieindesigns Well-Known Member

    Messages:
    128
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    130
    #7
    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... :D
     
    alfieindesigns, Oct 6, 2010 IP