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

JavaScript014

JS+CSS实现悬停在A元素，达到改变B元素样式的效果,第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：鼠标离开子列表时

如有疑惑，欢迎追问。

鼠标滑过哪显示啥？

滑过 产品介绍 显示下面的子菜单？

onmouseover是鼠标移动到某元素执行的鼠标事件。

onmousemove是鼠标在某元素上移动执行的事件。

你先把这两个分清楚了，根据你的需求是

先获取你要鼠标滑过的元素 也就是产品介绍这个a元素,你给其设置一个id假如设置其为product

那么先获取他

var product=document.getElementById('product')

再获取你要显示的子菜单元素productInfo

var productInfo=document.getElementById('productInfo')

productInfo.style.display='none'//设置其隐藏，如果CSS里已经隐藏，此步可以省略。

然后设置其鼠标事件，应该选择onmouseover

product.onmouseover=function(){

productInfo.style.display='block'//鼠标移动到product元素上让其子菜单显示。

}

product.onmouseout=function(){

productInfo.style.display='block'//鼠标移出product元素上让其子菜单隐藏。

}

如果你要让每个子菜单都读取他的子菜单可以循环遍历实现。思路相同。