CSS Help with H1 with a sub hover effect.

[Cabbit]

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?

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;
}

 

[angelwatt]

Use this for the last selector

header h1 a:hover .sub {
	color: #fcd8aa;
}

 

[Cabbit]

Thanks works terrifically now :3

 

[CMT]

Try attaching the pseudo class in the h1 element:

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!

 

[CMT]

Ouch, too late

 

[eponym]

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:

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.

 

[Cabbit]

Thanks for posting anyway guys, its working braw now anyways