<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定位</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style-type: none; } a { text-decoration: none; color: rgb(82, 79, 79); } .nav { height: 50px; border: 1px solid #ccc; margin-top: 5px; } .nav li { /* height: 48px; */ float: left; width: 20%; border-right: 1px solid #ccc; } .nav li a { display: block; height: 48px; text-align: center; line-height: 48px; position: relative; } .nav li a .code { position: absolute; /* 从水平距离一半的位置开始,图片水平并不是居中显示 */ left: 50%; /* 垂直距离 距离顶部50px */ top: 50px; /* 图片水平位置居中显示,减掉图片一半的宽度 */ transform: translate(-50%); display: none; } </style> </head> <body> <script> function over() { var code = document.getElementsByClassName("code"); var len = code.length; code[len - 1].style.display = "block"; } function out() { var code = document.getElementsByClassName("code"); code[0].style.display = "none" } </script> <div class="nav"> <ul> <li onm ouseover="over()" onm ouseout="out()"> <a href="#"> 导航显示 <img src="./html+css/study/code.png" alt="" class="code"> </a> </li> <li><a href="#">导航显示</a></li> <li><a href="#">导航显示</a></li> <li><a href="#">导航显示</a></li> <li><a href="#">导航显示</a></li> </ul> </div> </body> </html>
标签:定位,none,code,li,nav,height,display,css From: https://www.cnblogs.com/qutao125/p/16754433.html