asked on

Change CSS based on Status of another element

Created a menu. Menu uses <li> for each item (standard CSS stuff).

By default, the color scheme is white lettering on a blue background. When you hover, it should change to black lettering on an orange background.

The CSS I have written so far does this, but there is a little problem: the li item and the anchor tag (link) are operating independently (feature, not a bug.. I know).

Here's what I am stuck on...

If I move the mous slowly over the <li> item so the cursor is between the outter edge of the <li> CSS box, but not so far in as to toch the anchor, the box is orange and the link is white not black.

How do I change the anchor color from white to black as soon as the <li> element changes from blue to orange?

Essentially, I want the CSS to recognize that the li box has been changed from blue to orange, and therefore change the anchor tag from orange to black even though the mouse cursor hasn't gotten there yet.

#menu-main-navigation-menu {
	list-style:none;
	margin: 0;
	padding: 0;
	width: 570px;
	float:right;
	border-color:blue;
	border-style:solid;
	border-width:thin;
	
}

#menu-main-navigation-menu li {
	float:right;
	position:relative;
	display:inline;
	padding: 10px 10px 10px 10px;
	border-color:red;
	border-style:solid;
	border-width:thin;
	font-size:22px;
	background-color:#0078e6;
}

#menu-main-navigation-menu li:hover {
	background-color:#ffc300;
}

#menu-main-navigation-menu li a {
	color:white;
	text-decoration:none;
}

#menu-main-navigation-menu li a:hover{
	color:#000000;
}

Open in new window

kwingherrero

Hi DrDamnit,

Perhaps this link can help you. This is an example of an element changing its background color based on selection. Source codes were provided as well.

http://jsfiddle.net/JtzAL/1/

Hope this helps!

Cheers! =)

ASKER CERTIFIED SOLUTION

twohawks

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Hagay Mandel

#menu-main-navigation-menu li, #menu-main-navigation-menu li a {
      float:right;
      position:relative;
      display:inline;
      padding: 10px 10px 10px 10px;
      border-color:red;
      border-style:solid;
      border-width:thin;
      font-size:22px;
      background-color:#0078e6;
      color:white;
      text-decoration: none;
}

#menu-main-navigation-menu li:hover, #menu-main-navigation-menu li:hover a {
      background-color:#ffc300;
      color:#000000;
      text-decoration: none;
}

DrDamnit

ASKER

Exactly what I wanted!

Follow up question is here if you want more easy points:
https://www.experts-exchange.com/questions/27187906/Expand-anchor-to-size-of-container.html

twohawks

Thanks DrD. Glad that helped.