CODEWITHSUNDEEP
htmlcss
Pa3k.m
Pa3k.m

Reputation: 1156

:hover wont change child's font color

JS Fiddle

So yeah, the <b> should change font-color whenever hovered but it doesnt. The thing is, I am able to make it work by either

But why does this happen?

Also, bonus question, how come the border animation only activates on mouseover but not on mouseout?

Thanks!

Upvotes: 0

Views: 68

Answers (5)

leaksterrr
leaksterrr

Reputation: 4167

You'd have to use !important in your CSS because of the way you've written your CSS it won't overwrite the default, predefined colour.

A fast & dirty (but works) alternative is to simply move color: #555 from <b> into the li

http://jsfiddle.net/f33cR/8/

Upvotes: 1

Jeyarathnem Jeyachanthuru
Jeyarathnem Jeyachanthuru

Reputation: 1189

http://jsfiddle.net/f33cR/ Check this

Note : When you add a class like "#paren #child #element" then you apply a simple css like #element dosen't overwrite that class. If you want to overwrite you have two option.

Option 1. #parent #child #element:hover

or

Option 2. #element:hover { color:red!important;}

Upvotes: 1

РАВИ
РАВИ

Reputation: 12155

Currently, it is getting changed but your initial color is overriding the current one.

You can do

#yourelement:hover b{ color: red !important;}

Upvotes: 1

qaztype
qaztype

Reputation: 73

I would write it like this

#sidebar nav#menu #home-btn:hover b { color:#ef672f; }
#sidebar nav#menu #about-btn:hover b { color:#1ba59b; }
#sidebar nav#menu #portfolio-btn:hover b { color:#4d7ba2; }
#sidebar nav#menu #resume-btn:hover b { color:#bc6538;}
#sidebar nav#menu #contact-btn:hover b { color:#79a22e; }

About the bonus, I don't know but you can better trigger that actions with jquery.

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Write your css as like this 

#sidebar nav#menu #home-btn:hover b { color:#ef672f; }
#sidebar nav#menu #about-btn:hover b { color:#1ba59b; }
#sidebar nav#menu #portfolio-btn:hover b { color:#4d7ba2; }
#sidebar nav#menu #resume-btn:hover b { color:#bc6538;}
#sidebar nav#menu #contact-btn:hover b { color:#79a22e; }

Demo

---------------

2nd option is please

replace this 

#sidebar nav#menu li b { font-size:1.7em;  text-align:left; color:#555; }

into this 

nav#menu li b { font-size:1.7em;  text-align:left; color:#555; }

Demo 2

Upvotes: 0

Related Questions