1

I am trying to change a property of one element when hovering over another. In this case it is in my navigation.

What I have is a sub menu with a .class of .sub-menu

When I hover over the sub menu I want the parent of that element to change background color

The HTML code 

<ul class="main-nav">
  <li id"menu-item-1"><a>HOME</a></li>
  <li id"menu-item-2"><a>About</a>
     <ul class="sub-menu">
       <li><a>Some Link</a></li>
     </ul></li>
  <li id"menu-item-3"><a>Services</a></li>
 </ul>

So what I am trying to do is when I hover over the Sub Menu, I want the About Link to have a background-color.

The CSS code I been trying :

.sub-menu a:hover + #menu-item-2 a{
   background-color:#FF0;
 }

Also tried both of these:

.sub-menu a:hover ~ #menu-item-2 a{
   background-color:#FF0;
 }

.sub-menu a:hover > #menu-item-2 a{
   background-color:#FF0;
 }

Can someone please point me in the right direction here.

You can see the problem I have here - http://switchmedialab.co.za/switch-media/

When I hover over the service the background image "splat" appears but when I hover over the sub nav it disappear. I need it to stay there for the hover state.

Thanks.

Improve this question
0

5 Answers 5

Reset to default
1

Use javascript in this condition, it will be good,

<ul class="main-nav" id="mainDiv">
  <li id"menu-item-1"><a>HOME</a></li>
  <li id"menu-item-2"><a>About</a>
     <ul class="sub-menu" onmouseover="colourChange()";>
       <li><a>Some Link</a></li>
     </ul></li>
  <li id"menu-item-3"><a>Services</a></li>
 </ul>

javascript,

<script>
function colourChange() {
  document.getElementById("mainDiv").style.backgroundColor="#FF0";
}
</script>

same thing you can do in CSS also. Like this,

.sub-menu:hover + .main-nav {
    background: ##FF0
}
Improve this answer
2
  • Hi, yes make sense. Is there no other way with just CSS?
    – Brian Wiltshire
    Commented Jan 28, 2014 at 9:52
  • I have added the CSS code also, I hope it will be helpful for you.
    – Shivam
    Commented Jan 28, 2014 at 9:59
0

In CSS you can not influence a parent depending on state of child

Improve this answer
0

You are influence the parent-child concept. try this 

#menu-item-2 a:hover {
    background: red;
}
Improve this answer
1
  • Hi Thanks but wont work as we are changing both elements background colour in this case. I only want the #menu-item-2 background to change when I hover over the .sub-menu a. and only the #menu-item-2 must change, not both. Thanks anyway.
    – Brian Wiltshire
    Commented Jan 28, 2014 at 9:51
0

Here's a fiddle example http://jsfiddle.net/AdKP9/

#menu-item-2:hover {
    background: red;
}

edit: http://jsfiddle.net/AdKP9/1/

just add

.sub-menu:hover {
   background: white; 
}
Improve this answer
1
  • Hi Thanks but wont work as we are changing both elements background colour in this case. I only want the #menu-item-2 background to change when I hover over the .sub-menu a. and only the #menu-item-2 must change, not both. Thanks anyway.
    – Brian Wiltshire
    Commented Jan 28, 2014 at 9:51
0 
<!DOCTYPE html>
<html>
<head>
<style>
:target
{

background-color: #e5eecc;
}
</style>
</head>
<body>
<ul class="main-nav" id="mainDiv">
  <li id"menu-item-1"><a>HOME</a></li>
  <li id="news1"><a href="#news2">About</a>
     <ul class="sub-menu" onmouseover="colourChange()";>
       <li><a href="#news1">Some Link</a></li>
     </ul></li>
  <li id"menu-item-3"><a>Services</a></li>
 </ul>

</body>
</html>
I tried to use CSS3 since you wanted it to be CSS else Javascript is the best in this case.
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.