Question

head没有背景和颜色为黑色，鼠标悬停时其颜色为白色和背景黑色，其工作正常但

onmouse over content我想改变head的颜色？怎么样？是否只能使用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>

Answer 1

这可能有效。我知道css能够在结束标记之后影响元素，所以这与用于执行此操作的“+”相反。

<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>

Answer 2

你可以用JavaScript做到这一点。虽然我不清楚你想要什么，但我试了一下：

<!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>

Answer 3

考虑使用JQuery。

此Video Tutorial会对您有所帮助。

Answer 4

你有没有尝试过#meg li a：hover {background-color：＃000; color：#FFF; }

孩子的Onmouseover改变父颜色

4 个答案: