abstract：<!DOCTYPE html> <html> <head> <title> 下划线跟随鼠标 </title> &
<!DOCTYPE html>
<html>
<head>
<title>
下划线跟随鼠标
</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js">
</script>
<style type="text/css">
*{ margin: 0px; padding: 0px; } #box{ width: 500px; height: 40px; background-color:
red; position: relative; left: 200px; top: 30px; border-radius: 5px; box-shadow:
0px 0px 10px red; } ul li{ list-style: none; display: inline-block; width:
120px; height: 30px; position: relative; line-height: 40px; color: #fff;
text-align: center; } #uline{ width: 120px; height: 5px; background: green;
position: relative; top:5px; display: none; }
</style>
</head>
<body>
<div id="box">
<ul>
<li>
首页
</li>
<li>
PHP中文网
</li>
<li>
灭绝师太
</li>
<li>
独孤九剑
</li>
</ul>
<div id="uline">
</div>
</div>
<script type="text/javascript">
$(function() {
$('li').mouseover(function() {
$("#uline").show();
$index = $("li").index($(this)) * 125;
$("#uline").animate({
left: $index + 'px'
},
50)
}) $("li").mouseleave(function() {
$("#uline").hide();
})
})
</script>
</body>
</html>
Correcting teacher：灭绝师太Correction time：2018-11-03 09:10:19
Teacher's summary：活学活用 很棒……就希望每个人跟你一样，用自己的想法实践出来