SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hover background colour not working (grouping of CSS divs)

    Hi,

    I'm trying to create a hover selector on 3 seperate divs - for some reason when I grouped this in the CSS only one of the div's works the other 2 do not?

    Code is pened here - http://codepen.io/valleysboy/pen/Jfdco

    Any help on my poor syntax is appriciated!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You only applied the hover effect to one box. Add :hover to all three and it will work.

    e.g.
    Code:
    #right-box:hover , #left-box:hover , #center-box:hover { etc....

  3. #3
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul - thought by grouping them I only needed to declare :hover on the final div.
    <Amedned the code on the pen link above for others to reference).

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by stephen_ View Post
    Thanks Paul - thought by grouping them I only needed to declare :hover on the final div.
    <Amedned the code on the pen link above for others to reference).
    It's a common mistake

    A comma separated list is just a list of separate items that have no relation to anything else in the list. The only think they have in common is that they will all use the styles declared in the style block.


Tags for this Thread

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
  •