Question

JS+CSS实现悬停在A元素，达到改变B元素样式的效果

其实，就是二级菜单，悬停在子菜单时保持顶级菜单高亮。。。有前端的大神么？

不要Jquery方法！
代码片段如下：
<li><a id="p1" href="../news/rf_news.htm">新闻资讯</a>
<ul id="c1">
<li><a href="#">新闻资讯</a></li>
<li><a href="#">新闻资讯</a></li>
<li><a href="#">新闻资讯</a></li>
</ul>
</li>

请测试通过~

Answer 1

你好，按照你的要求和代码，我写了一个范例，请参考：

<li><a id="p1" href="#">新闻资讯</a>
  <ul id="c1">
    <li><a href="#">新闻资讯</a></li>
    <li><a href="#">新闻资讯</a></li>
    <li><a href="#">新闻资讯</a></li>
  </ul>
</li>
<script>
  //悬停在子列表上面时改变顶列表的背景
  document.getElementById('c1').onmouseover = function(){
    document.getElementById('p1').style.background = "#f00";
  }
  //鼠标离开子列表时恢复顶列表的背景
  document.getElementById('c1').onmouseout = function(){
    document.getElementById('p1').style.background = "#fff";
  }
</script>

运行效果1：鼠标悬停在子列表上时

运行效果2：鼠标离开子列表时

如有疑惑，欢迎追问。

Answer 2

开个定时器就可以的

Answer 3

不要jQuery貌似有点复杂。。。等我研究一下