Onmouseover on child change the parent color

Question

head no background and color black ,on mouseover its color will be white and background black ,its working fine but

onmouse over on content i want to change the color of head? how? Is it possible only using css?

 <ul id="meg">
   <li><a href="#">head</a>
    <div>
    <h2>su head</h2>
    <p><a href="#">content</a></p>
    <p><a href="#">content</a></p>
     </div>
    </li>
 <li><a href="#">head</a>
    <div>
    <h2>su head</h2>
    <p><a href="#">content</a></p>
    <p><a href="#">content</a></p>
     </div>
    </li>
</ul>

Use jquery for this not possible to handle parent on child hover event in css. — SVS, Jul 28 '12 at 06:58

score 1 · Answer 1 · answered Jul 28 '12 at 07:24

1

this might work. i've knows css to be able to affect elemnts after the closing tag not before,so this is areverse of the "+" used to do that.

<style type="text/css">
   #content:hover - #head { background-color: black; color: white; }
  </style>

 <ul id="meg">
   <div id="head">
   <li><a href="#">head</a>
   </div>
   <div id="content">
    <h2>su head</h2>
    <p><a href="#">content</a></p>
    <p><a href="#">content</a></p>
     </div>
    </li>
    </ul>

answered Jul 28 '12 at 07:24

Atom Vayalinkal

2,642
7
29
37

+1 Thank you ,but i cant add another div,This is i used for multilevel menu,if i add another div its structure will change. – Prashobh Jul 28 '12 at 07:34
1

this is the only way to do it with css alone. otherwise you need javascript. jquery is not necessary. – Atom Vayalinkal Jul 28 '12 at 14:45
1

hmm i guess it doesn't work then. looks he'll have to use javascript. – Atom Vayalinkal Jul 29 '12 at 03:58

score 1 · Accepted Answer · edited Jul 28 '12 at 08:26

You can do it with JavaScript. Though I'm not entirely clear on what you wanted, I gave it a shot:

<!DOCTYPE html> 
<html>
<head>
<script type="text/javascript">  
function stuff(){
   var k = document.getElementsByTagName('li');
   for (var i = 0; i < k.length; i++) {
        var s = k[i];     
        s.firstChild.style.color = 'white';
        s.firstChild.style.backgroundColor= 'black';
    }
}
</script>
</head>
<body>
  <ul id="meg">
    <li>
       <a href="#">head</a>
       <div>
          <h2>su head</h2>
          <p><a href="#" onmouseover="stuff()">content</a></p>
       </div>
    </li>
  </ul>
</body>
</html>

score 0 · Answer 3 · answered Jul 28 '12 at 07:01

0

Have you tried #meg li a:hover { background-color:#000;color:#FFF; }

answered Jul 28 '12 at 07:01

dilloncarter

35
1
8

1

on mouse over on child i want to change the color of parent – Prashobh Jul 28 '12 at 07:03

Onmouseover on child change the parent color

3 Answers3