Keep parent hover state when child is hovered

I've found multiple solutions that work but nothing seems to fix another problem this creates. When I add the CSS and jQuery code for doing this and I refresh my browser to see if it works, it does.....mostly. The background of the parent element keeps the hover state but the text fades back to its original, non-hovered state, leaving nothing but an orange (#d35400) background (because the text is originally that color but turns a white color [#ecf0f1] when the item is hovered over).

At this point I don't know what to do. I've tried 4-5 different solutions that get the parent element to keep its hover state but the text of the parent element just won't stay the color it's supposed to.

I would include the code here but I'm afraid it's not allowing me to because of how much I need to include. So here's a link: http://jsfiddle.net/Lmdunrzj/2/. Please hover over "Roster" (the second menu item from the left) and then hover over any of its drop-down items. The background keeps its hover state but the text won't. I've tried everything I can think of and none of what I try has helped (obviously).

I look forward to your responses and help! Thank you so much in advance!

Answers


check this Fiddle

I did not change anything in your code, all I did was include jQuery.2.1.4 and it seems to be working. This would lead me to believe you do not have jQuery resourced on your html page. If this does not fix your issue please let me know with more detail.

Here is the jquery resource:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>


You can keep the hover state of the entire navigation item when hovering other sub-items if you set the :hover event to the <li> parent instead of the <a>-tag.

header div#nav-container nav#nav-menu ul#nav-items li.roster-li:hover > a {
  color: #ecf0f1;
}

And you should probably not use that many id (or any) IDs in your CSS since it will make it much harder to overwrite styles.

Try to read up on specifity because it will speed up both development and page loads. http://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/ http://www.impressivewebs.com/css-specificity-irrelevant/


Need Your Help

Data mining with SSRS in SQL

sql reporting-services

How Could I make data mining with a report possible. I know basic SQL and managed to make some static tables but I want to be able to click on an item and have a more detailed table on just that it...

Maven YUI Compressor, concat but don't minify (turn compression off)

java maven vaadin yui vaadin7

I am working on a legacy project, it's a Vaadin component which uses Maven YUI plugin to minify and concatenate the javascript files. There are 40 js files.