This forum is now read-only. Please use our new forums at discuss.codecademy.com.

199 points
0349a967fb05820d1af82212b7508290?s=140&d=retro
Submitted by
mustangcharlie
almost 4 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;
}


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.

8871 points
5958b8ebe12813a2a3000034_980106998
Submitted by
Roy
almost 4 years ago

1 Comment

0349a967fb05820d1af82212b7508290?s=140&d=retro mustangcharlie almost 4 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!!!


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
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
almost 4 years ago

1 Comment

0349a967fb05820d1af82212b7508290?s=140&d=retro mustangcharlie almost 4 years ago

wow- lots of info there- thank you!