CSS Help with H1 with a sub hover effect.

Discussion in 'Web Design and Development' started by Cabbit, Aug 14, 2010.

  1. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #1
    On this my test page here my header is inside a header and hgroup then there is a h1 that is a hyper link with span .sub.

    Now my issue is when you mouse over the word "name" it highlights both words however when you mouse over the word "Site" it only highlights that word and not the full header.

    Anyone got some idea's?


    HTML:
    h1 {
    	color: #8ab6d0;
    	font-size: 4em;
    	letter-spacing: -2px;
    	margin-top: 0;
    	font-family: "BloklettersPotloodPotlood", "Times New Roman", Times, serif;
    }
    
    header h1 a, a:active, a:visited {
    	text-decoration: none;
    }
    
    header h1 a:hover {
    	color: #a1d7f5;
    	text-decoration: none;
    }
    
    header h1 .sub {
    	color: #d0b28a;
    }
    
    header h1 .sub:hover {
    	color: #fcd8aa;
    }
    
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Use this for the last selector

    Code:
    header h1 a:hover .sub {
    	color: #fcd8aa;
    }
     
  3. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
  4. CMT macrumors member

    CMT

    Joined:
    Aug 24, 2009
    #4
    Try attaching the pseudo class in the h1 element:

    Code:
    header h1:hover a {
      // a changes on h1 hover here
    }
    header h1:hover .sub1 {
      // .sub1 changes on h1 hover here
    }
    
    That way both will be changed on h1 hover and not a child hover.

    PS: Not sure this is what you want, I hope so!
     
  5. CMT macrumors member

    CMT

    Joined:
    Aug 24, 2009
  6. eponym macrumors 6502

    Joined:
    Jul 2, 2010
    #6
    You're probably running into either a cascade conflict or an declaration order issue (such as when you declare the hover pseudo class). At any rate, try changing the last three items to this:

    Code:
    header h1 .sub {
    	color: #d0b28a;
    }
    
    header h1 a:hover {
    	color: #a1d7f5;
    	text-decoration: none;
    }
    
    header h1 a:hover .sub {
    	color: #fcd8aa;
    }
    LOL

    That's what I get for leaving a window open for 30 minutes before replying. I thought nobody had replied yet.
     
  7. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #7
    Thanks for posting anyway guys, its working braw now anyways :)
     

Share This Page