SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Mouseover Effect For Complete DIV

    Hi,

    Can anyone advise how to change the background colour of a complete DIV upon mouseover.

    Is there a term for it?

  2. #2
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since you're learning I would google 'hover tutorials'. It's the hover mode that change on mouse over. I think that would be enough. I will check...


    I just checked these Keywords: css hover tutorial.

    There is a complete list of people who have already explained things.

    Best Regards

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,199
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by justlukeyou View Post
    Can anyone advise how to change the background colour of a complete DIV upon mouseover.
    It's very simple. If you have a div with, say, a class of "feature", you'd do something like this:

    Code:
    .feature:hover {
      background: red;
    }

  4. #4
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Brilliant thanks, how do I a class to the DIV?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,199
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by justlukeyou View Post
    Brilliant thanks, how do I a class to the DIV?
    In your HTML, just add the bit in blue to the opening <div> tag of the div you want to see the effect on:

    Code:
    <div class="feature">
    
    </div>
    Of course, call the class whatever you like. "feature" is just an example.

  6. #6
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    This is the HTML and CSS I have but I cant get it to work, am I doing it correctly?

    <div id="aboutuslinksheader">
    <div id="feature">
    About
    </div>
    </div>

    #aboutuslinkscell {
    float:left;
    width:25%;
    padding-left: 1%;
    border:1px solid #CBCBCB;
    }


    #feature:hover {
    background: #7B7B7B;
    }

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,199
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Yes, that should work nicely. Something else on your page must be getting in the way. (You aren't testing this in IE6, I presume? The hover effect only works on links in that dead browser.)

    Can you post a link to your page?

    Edit:

    I should clarify that the hover effect should work here. But the float: left etc. can't work as they are for a div with a different id from that of the outer div in your HTML.

  8. #8
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I got it working thanks however I have padding inside the aboutuslinks DIV for the content but the padding doesn't change colour. Is there anyway of making the padding area change colour also?

    #aboutuslinks {
    float:left;
    width:96%;
    font-family:helvetica, geneva, serif;
    font-size:1.2em;
    border:1px solid #CBCBCB;
    color: #7B7B7B;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3%;
    }


    #feature:hover {
    background: #7B7B7B;
    }

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,199
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by justlukeyou View Post
    Is there anyway of making the padding area change colour also?
    You'll need to put that padding on the feature div instead. Is there actually a need for the outer div? That is, does it contain any content that's not inside the feature div? If not, then just merge the two into one.

  10. #10
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I merged the two together but all the padding and font styling only comes into affect when I mouseover the DIV.

    I set out two DIVs so only the background would change on Mouseover. But the padding on the DIV surrounding feature doesn't change colour.

  11. #11
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Can you show us the new HTML and CSS code you currently have?
    Maleika E. A. | Rockatee | Twitter | Dribbble



  12. #12
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This is what I have, whatever change I make it doesn't have the desired affect of making everything in aboutuslinks change colour including the padding.

    <div id="aboutuslinks">
    <div id="feature">
    Links One
    </div>
    </div>

    #aboutuslinks {
    float:left;
    width:96%;
    font-family:helvetica, geneva, serif;
    font-size:1.2em;
    border:1px solid #CBCBCB;
    color: #7B7B7B;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3%;
    }


    #feature:hover {
    background: #F4F5FF;
    }

  13. #13
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    It can't because the #feature is inside of #aboutus, meaning #feature can only occupy the space that is left and the padding belongs to the outer element, not the inner element.

    So, instead you'd need to apply the padding to the inner element:

    Code:
    #aboutuslinks { 
    float:left;
    width:96%;
    font-family:helvetica, geneva, serif;
    font-size:1.2em;
    border:1px solid #CBCBCB;
    color: #7B7B7B;
    }
    
    
    #feature {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3%;
    }
    
    
    
    
    #feature:hover {
    background: #F4F5FF;
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  14. #14
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I see, cheers dude.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •