Why isn't a:hover working?


#1

https://www.codecademy.com/en/courses/web-beginner-en-9x6JW-WnAFv/0/7?curriculum_id=50579fb998b470000202dc8b

Hey guys. As seen in my code below, I have inserted a link inside my header (which is the "email"). I've been able to position it correctly but cannot get the a:hover pseudo selector to work. I would have thought that my code would have turned the link white when one hovers over it, but it doesn't do so as is. Any insight on this would be appreciated.


(html portion)
<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body>
	    <div id="header">
	        <div id="name">TAKfish</div>
	        <img src="https://s-media-cache-ak0.pinimg.com/236x/dd/7f/18/dd7f188ac2712cca739fa35645c41252.jpg" id="picture"/>
	        <a href="#" id="email">TAKfish@example.com</a>
	    </div>
	    <div class="left">
	        <h1>For More Information:</h1>
	        <ul>
	            <li><a href="#">1</a></li>
	            <li><a href="#">2</a></li>
	            <li><a href="#">3</a></li>
	            <li><a href="#">4</a></li>
	            <li><a href="#">5</a></li>
	    </div>
	    <img src="https://miyasinspiration.files.wordpress.com/2015/01/mandarinfish-5.jpg" id="picture1">
	    <div class="right">
	        <h2 class="header">Objective:</h2>
	        <p class="par">To gain acceptance into the prestigous Pacific Institute of Marine Academics (PIMA).</p>
	        <h2 class="header">Education</h2>
	        <p class="par">High school diploma from the elite Specialized Underwater Research and Facilitation (SURF) Academy, the nation's top secondary school. Also recieved training in multiple languages spanning various media and organisms.</p>
	        <h2 class="header">Skills</h2>
	        <p class="par">Seaweed basket weaving. Some fluency in HTML/CSS, Python, dolphin, whale, shark, and frog. Can perform an oil change underwater. Capable Swimmer.</p>
            <h2 class="header">Experience</h2>
            <p class="par">Taken multiple jobs as an automobile and submarine mechanic. Took part in research on scalular cancer, specifically on tracing its lineage from its human counterpart and searching for possible similarities to help in finding a cure.</p>
	    </div>
	    <div id="footer"></div>
	</body>
</html>


(css portion)
body {
    margin: 0;
}
div {
    border-radius: 5px;
    position: relative;
    box-sizing: border-box;
}

#header {
    background-color: blue; /*fix color*/
    width: 98.8%;
    height: 20%;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 30px;
    margin-bottom: 10px;
    position: fixed;
    z-index: 1;
}

#name {
    font-size: 123px;
    color: orange;
    font-family: fantasy;
    position: relative;
    margin-top: 11px;
    margin-left: 10px;
    bottom: 19px;
    display: inline-block;
}

#picture {
    display: inline-block;
    position: relative;
    width: auto;
    height: 70%;
    margin-left: 40px;
    margin-top: 20px;
    border: 4px solid orange;
    border-radius: 5px;
}

#email {
    position: relative;
    float: right;
    font-size: 40px;
    color: red;
    margin-top: 35px;
    margin-right: 20px;
    text-decoration: none;
}

 a:hover {
    color: white;
}

#footer {
    background-color: blue; /*fix color*/
    display: inline-block;
    width: 98.8%;
    height: 10%;
    bottom: 140px;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 20px;
    margin-right: 10px;
    clear: both;
}

.left {
    background-color: green; /*fix color*/
    display: inline-block;
    width: 12%;
    height: 48%;
    float: left;
    margin-top: 153px;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
}

div h1 {
    font-size: 28px;
    text-align: center;
    margin-top: 20px;
    font-family: Lucida Bright;
}

div ul {
    text-align: center;
    font-size: 30px;
    margin-left: 40px;
    margin-right: 40px;
}

#picture1 {
    position: relative;
    border: 4px solid red;
    height: auto;
    width: 11.5%;
    display: inline-block;
    float: left;
    top: 483px;
    right: 197px;
    border-radius: 5px;
}

.right {
    background-color: yellow; /*fix color*/
    display: inline-block;
    width: 85%;
    height: 71.5%;
    bottom: 138px;
    float: right;
    margin-top: 153px;
    margin-bottom: 10px;
    margin-right: 10px;
}

.header {
    margin-left: 10px;
    margin-top: 20px;
    margin-bottom: 5px;
    font-size: 30px;
    font-family: Lucida Bright;
}

.par {
    margin-top: 10px;
    text-align: left;
    margin-left: 10px;
    font-size: 20px;
}

The code relating to this is near the beginning of both, but I included all of it in case something afterwards was the problem. Thanks.


#2

Don't see exactly why it's not working, but if you target it a different way, say using #email:hover it will work. As you have it now, it might be getting overruled by something lower in the stylesheet. Give me a sec though I'm still looking.


#3

The issue relates to specificity. #email has specificity 0100 where a:hover has specificity 0002. This means the color property is taken from #email.

The thing to do would be take the color attribute out of the rule set, and create a separate rule for all links, such as,

a {
    color: red;
}
a:hover {
    color: white;
}

Or, you could create a set of rules for the id.

#email a {}
#email a:hover {}

#4

Dangit mtf, I just used google dev tools and was just about to post that lol :stuck_out_tongue_closed_eyes:


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.