How do I make the background-color change when I hover?

Question

0.00/5 (No votes)

See more:

My code so far is simple but I'm not sure how to overwrite the default background-color I have set for this class. the necessary html:

HTML

<!--This is the site navigation -->
<div class="navbar" id="navbar">
    <a href=""><img src="./Images/Hogwarts_Crest.png" alt="Welcome Home" id="home_image"></a>
    <ul class="navbar">
        <li class="Hufflepuff"><a href="">Browse</a></li>
        <li class="Gryffindor"><a href="">Submit</a></li>
        <li class="Ravenclaw"><a href="">Profile</a></li>
        <li class="Slytherin"><a href="">Settings</a></li>
    </ul>
</div>

and the css that goes with it:

CSS

/*general settings for the houses*/
.Hufflepuff {
	background-color: rgba(255, 255, 0, 1);
	color: Black;
}

.Gryffindor {
	background-color: rgba(255, 0, 0, 1);
	color: rgb(255, 215, 0);
}

.Ravenclaw {
	background-color: rgba(0, 0, 255, 1);
	color: rgb(205, 157, 50);
}

.Slytherin {
	/*background-color is emerald*/
	background-color: rgba(80, 200, 120, 1);
	color: rgb(211, 211, 211);
}

/*settings specifically for links in houses*/
.Hufflepuff a {
	color: Black;
}

.Gryffindor a {
	color: rgb(255, 215, 0);
}

.Ravenclaw a {
	/*text color is bronze*/
	color: rgb(205, 157, 50);
}

.Slytherin a {
	color: rgb(211, 211, 211);
}

/*hover colors*/
.Hufflepuff a:hover {
	background-color: rgba(255, 255, 0, 0.5)
	color: Black;
}

.Gryffindor a:hover {
	background-color: rgba(255, 0, 0, 0.5)
	color: rgb(255, 215, 0);
}

.Ravenclaw a:hover {
	background-color: rgba(0, 0, 255, 0.5)
	/*text color is bronze*/
	color: rgb(205, 157, 50);
}

.Slytherin a:hover {
	background-color: rgba(80, 200, 120, 0.5)
	color: rgb(211, 211, 211);
}

The idea here is that there is a horizontal navigation bar at the top of the screen. Each button has it's own background and text color. When the mouse hovers over a button, I want the alpha decreased by .5 on the background-color.

From what I can tell, the class selector is automatically considered priority over class selector + tag selector (e.g. ".Hufflepuff" takes priority over ".Hufflepuff a"), how do I overcome that?

What I have tried:

I tried rearranging the order so that the :hover selector was at the top, but it didn't help.

Posted 27-Jan-17 3:51am

KitsunePhoenix

Updated 27-Jan-17 4:43am

Add a Solution

2 solutions

Solution 2

Check this out: JSFiddle[^]. You have forgotten to add ; to

background-color: rgba(255, 255, 0, 0.5)

Posted 27-Jan-17 4:43am

Peter Leow

Comments

KitsunePhoenix 27-Jan-17 12:29pm

thank you for pointing that out, I fixed it. still didn't solve my problem though.

Bryian Tan 27-Jan-17 12:45pm

try overwrite it by adding !important
background-color: rgba(255, 255, 0, 0.5) !important;

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2017-01-27T04:17:00

The problem is that you're setting the background colour on the parent element, but modifying the background colour on the anchor element.

When you hover over the anchor, you set its background colour to a 50% opaque version of the parent's background colour. But mixing, for example, 50% opaque red from the anchor with 100% opaque red from the parent just gives you 100% opaque red.

You need to change your classes to modify the background colour of the parent on hover, rather than the background colour of the anchor:

CSS

.Hufflepuff {
    background-color: rgba(255, 255, 0, 1);
    color: Black;
}
.Hufflepuff:hover {
    background-color: rgba(255, 255, 0, 0.5)
}
.Hufflepuff a,
.Hufflepuff a:hover {
    color: Black;
}

Demo[^]