摘要：<!DOCTYPE html> <html> <head> <title> 下劃線(xiàn)跟隨鼠標(biāo) </title> &
<!DOCTYPE html>
<html>
<head>
<title>
下劃線(xiàn)跟隨鼠標(biāo)
</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>
首頁(yè)
</li>
<li>
PHP中文網(wǎng)
</li>
<li>
滅絕師太
</li>
<li>
獨(dú)孤九劍
</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>
批改老師：滅絕師太批改時(shí)間：2018-11-03 09:10:19
老師總結(jié)：活學(xué)活用 很棒……就希望每個(gè)人跟你一樣，用自己的想法實(shí)踐出來(lái)