Delete Icon
This forum is now read-only. Please use our new forums at discuss.codecademy.com.
0 points
Submitted by mustangcharlie
5 years ago

how to make the color of "a:hover" override color of #id

I put my email address in the header

, and wanted to have the text change color and weight when you hover over it. The text-weight is changing, but the color stays the same. I’m guessing CSS sees the id selector as more important than the pseudo-class? I swear it worked briefly! Here’s my HTML:

<div id="header">
    <p id="name">Christine Charles • 585-555-5555</p>
    <a href="mailtoyou:[email protected]"><p id="email">[email protected]</p></a>
</div>

Here’s the CSS:

a:hover { color: #ffb300; font-weight:bold; }

#email { float: right; margin-right: 10px; margin-top: 10px; color: white; }

Answer 559da7cee39efeac8b0006b4

1 vote

Permalink

<a href="___URL___"><p>some text</p></a>

When we write the above, which is invalid HTML, we are writing a block level element inside an inline element. If anything, we should write it the other way around:

<p><a>some link text</a></p>

Now it is contained properly, and is valid HTML. The style rule for a:hover will override the paragraph as long as it is written in the CSS after the rule for p or #id.

p {
    /* some rules */
}
#id {
    /* some rules */
}
a {
    /* some rules */
}
a:hover {
    /* some rules */
}

Where we write our selector rules in the style sheet, as in the order, is a very important aspect of CSS. Study up on “Cascade” and “Specificity” as two governing principles in CSS.

9087 points
Submitted by Roy
5 years ago

1 comments

mustangcharlie 5 years ago

That makes sense! I was copying the example Code Academy gave, since I was unfamiliar with the “mailtoyou” link. Got it working- thanks!!!

Answer 559da3259376763b360005c7

0 votes

Permalink

What you are looking for https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Cascading_and_inheritance

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

google search == the Book == jquery [your question] site:developer.mozilla.org CSS [your question] site:developer.mozilla.org javascript [your question] site:developer.mozilla.org [your question] site:jquery.com [your question] site:getbootstrap.com

== discussions / opinions == jquery [your question] site:stackoverflow.com CSS [your question] site:stackoverflow.com javascript [your question] site:stackoverflow.com

== guidance == www.crockford.com [your question] site:crockford.com

http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page

3701 points
Submitted by Leon
5 years ago

1 comments

mustangcharlie 5 years ago

wow- lots of info there- thank you!