Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}a {text-decoration: none;}body {background-color: #eeeeee;}.clearfix {clear: both;}div.title {margin-top: 100px;margin-left: 300px;}div.title ul li {float: left;}div.title ul li a {display: block;height: 30px;line-height: 30px;background-color: skyblue;color: #ffffff;padding: 5px 12px;}div.title ul li a:hover {background-color: purple;}div.content {margin-left: 300px;background-color: #ffffff;width: 342px;}div.content > div {display: none;}div.content > div:first-child {display: none;}</style></head><body><div class="title"><ul><li><a class="title-content" href="#">Java</a></li><li><a class="title-content" href="#">C语言</a></li><li><a class="title-content" href="#">Python</a></li><li><a class="title-content" href="#">PHP</a></li><li><a class="title-content" href="#">Android</a></li></ul><div class="clearfix"></div></div><div class="content"><div class="detail"><ul><li><a>Java是一门优秀的语言</a></li></ul></div><div class="detail"><ul><li><a>C语言是一门优秀的语言</a></li></ul></div><div class="detail"><ul><li><a>Python是一门优秀的语言</a></li></ul></div><div class="detail"><ul><li><a>PHP是一门优秀的语言</a></li></ul></div><div class="detail"><ul><li><a>Android是一门优秀的语言</a></li></ul></div></div></body><script>// 根据样式类名，或者dom节点，返回的是数组，因为很多dom节点的class样式一样var titles = document.getElementsByClassName('title-content');// var arr = [34, 45];// 详情信息var details = document.getElementsByClassName('detail');for(var i = 0; i < titles.length; i++) {var title = titles[i];// 给每个title人为加个属性, 将每一次遍历的值，赋值给title新添加的属性title.n=i;// 鼠标悬停事件绑定, 但是没有执行, 真正取i的值的时候，是执行事件的时候title.onmouseover = function() {var ind = this.n; // 获取到当前鼠标悬停的title的索引for(var j = 0; j < details.length; j++) {// 让与title对应的新闻详情显示, 索引相同就对应上了if(ind == j) {details[j].style.display = 'block';}else { // 将其他的隐藏details[j].style.display = 'none';}}};// title.onblur=function () {////var inds = this.n;//for (var o =0;o<details.length;o++){//// if (inds==false){// details[o].style.display='none';////// }else{// details[o].style.display='block';//// }//////}// }//console.log(i)}function onmouseover(obj) {}</script></html>
