編程練習
小伙伴們，請為導航添加鼠標移開效果
效果圖:
溫馨提示:完成任務后，請驗證是否與實踐描述效果一致，如一致，恭喜您，你已經掌握此技能。
任務
在編輯器的第206行處，使用JS代碼，循環(huán)設置li標簽的鼠標的移入和移開效果
提示：指定li標簽onmouseover和onmouseout函數(shù)，設置移入時樣式為lihover,設置移開時樣式為空即可。
- ?不會了怎么辦
-
參考代碼:
<script type="text/javascript">
window.onload = function () {
var Lis = document.getElementsByTagName("li");
for (i = 0; i < Lis.length; i++) {
Lis[i].i = i;
//設置鼠標移入時的樣式。
Lis[i].onmouseover = function () {
this.className = "lihover";
}
//設置鼠標移開時的樣式為空。
Lis[i].onmouseout = function () {
this.className = "";
}
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
padding: 0;
font-size: 10pt;
behavior:url(css/csshover.htc);
}
.topmenu
{
display: block;
width: 220px;
border: 2px solid #e4393c;
margin: 0;
padding: 0;
}
.toptitle
{
height: 40px;
line-height: 40px;
text-align: left;
font-size: 11pt;
font-weight: bold;
color: White;
background: #e4393c;
padding-left: 20px;
}
.topmenu li
{
height: 30px;
line-height: 30px;
font-size: 11pt;
list-style-type: none;
text-align: left;
padding-left: 8px;
z-index: 3;
background-image: url(http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg);
background-repeat: no-repeat;
background-position: right;
}
.topmenu li a
{
text-decoration: none;
color: #313131;
}
.topmenu li a:hover
{
text-decoration: underline;
font-weight: bold;
color: #e4393c;
}
.topmenu .lihover /*鼠標移動到上面時，應用的樣式*/
{
border: 1px solid #DDD;
border-right: 0;
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
background-image: none;
height:60px;
border-left:4px solid #e4393c;
}
.topmenu .lihover .submenu /*懸浮層*/
{
display: block;
}
.topmenu .lihover span /*白色小方框*/
{
background: white;
display: inline-block;
z-index: 20;
width: 20px;
height: 60px;
float: right;
position: relative;
}
.topmenu li b
{
display:none;
}
.topmenu .lihover b
{
display:block;
height:30px;
line-height:30px;
font-weight:normal;
font-size:10pt;
}
.submenu
{
display: none;
width: 715px;
left: 220px;
position: absolute;
top: 40px;
border: 1px solid #DDD;
z-index: 4;
background: white;
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
}
.leftdiv
{
float: left;
width: 490px;
margin: 5px;
}
.rightdiv
{
float: left;
width: 200px;
margin: 5px;
}
.leftdiv dl
{
display: block;
border-bottom: 1px solid #EEE;
padding-bottom: 6px;
overflow: hidden;
}
.leftdiv dl dt
{
display: block;
float: left;
width: 60px;
text-align: right;
height: 22px;
line-height: 22px;
padding-right: 6px;
}
.leftdiv dl dt a
{
color: #e4393c;
font-weight: bold;
text-decoration: underline;
font-size: 10pt;
}
.leftdiv dl dd
{
display: block;
overflow: hidden;
}
.leftdiv dl dd a
{
display: block;
float: left;
border-left: 1px solid #CCC;
color: #737373;
font-size: 9pt;
padding: 0 8px;
height: 14px;
line-height: 14px;
margin: 4px 0;
}
.rightdiv dl dd
{
margin: 3px 0;
}
.rightdiv dl dt
{
color: #e4393c;
font-weight: bold;
font-size: 10pt;
}
.rightdiv dl dd a
{
font-size: 9pt;
color: #737373;
line-height: 22px;
}
.rightdiv dl dd a:hover
{
color: #737373;
font-weight: normal;
}
.rightPic
{
position:relative;
right:-35px;
bottom:-30px;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
// 編寫JS代碼
}
</script>
<ul class="topmenu">
<div class="toptitle">
全部商品分類
</div>
<li><a href="#">圖書、音像、數(shù)字商品</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">電子書</a></dt>
<dd>
<a href="#">免費</a> <a href="#">小說</a> <a href="#">勵志與成功</a> <a href="#">婚戀/兩性</a>
<a href="#">文學</a> <a href="#">經管</a> <a href="#">暢讀VIP</a>
</dd>
</dl>
<dl>
<dt><a href="#">數(shù)字音樂</a></dt>
<dd>
<a href="#">通俗流行</a> <a href="#">古典音樂</a> <a href="#">搖滾說唱</a> <a href="#">爵士藍調</a>
<a href="#">鄉(xiāng)村民謠</a> <a href="#">有聲讀物</a>
</dd>
</dl>
<dl>
<dt><a href="#">音像</a></dt>
<dd>
<a href="#">音樂</a> <a href="#">影視</a> <a href="#">教育音像</a> <a href="#">游戲</a>
</dd>
</dl>
<dl>
<dt><a href="#">文藝</a></dt>
<dd>
<a href="#">小說</a> <a href="#">文學</a> <a href="#">青春文學</a> <a href="#">傳記</a> <a
href="#">藝術</a>
</dd>
</dl>
<dl>
<dt><a href="#">人文社科</a></dt>
<dd>
<a href="#">歷史</a> <a href="#">心理學</a> <a href="#">政治/軍事</a> <a href="#">國學/古籍</a>
<a href="#">哲學/宗教</a> <a href="#">社會科學</a>
</dd>
</dl>
<dl>
<dt><a href="#">經管勵志</a></dt>
<dd>
<a href="#">經濟</a> <a href="#">金融與投資</a> <a href="#">管理</a> <a href="#">勵志與成功</a>
</dd>
</dl>
<dl class="fore7">
<dt><a href="#">生活</a></dt>
<dd>
<a href="#">家教與育兒</a> <a href="#">旅游/地圖</a> <a href="#">烹飪/美食</a> <a href="#">時尚/美妝</a>
<a href="#">家居</a> <a href="#">婚戀與兩性</a> <a href="#">娛樂/休閑</a> <a href="#">健身與保健</a>
<a href="#">動漫/幽默</a> <a href="#">體育/運動</a>
</dd>
</dl>
<dl>
<dt><a href="#">科技</a></dt>
<dd>
<a href="#">科普</a> <a href="#">IT</a> <a href="#">建筑</a> <a href="#">醫(yī)學</a> <a href="#">
工業(yè)技術</a> <a href="#">電子/通信</a> <a href="#">農林</a> <a href="#">科學與自然</a>
</dd>
</dl>
<dl>
<dt><a href="#">少兒</a></dt>
<dd>
<a href="#">少兒</a> <a href="#">0-2歲</a> <a href="#">3-6歲</a> <a href="#">7-10歲</a>
<a href="#">11-14歲</a>
</dd>
</dl>
<dl>
<dt><a href="#">教育</a></dt>
<dd>
<a href="#">教材</a> <a href="#">中小學教輔</a> <a href="#">考試</a> <a href="#">外語學習</a>
</dd>
</dl>
<dl>
<dt><a href="#">其它</a></dt>
<dd>
<a href="#">英文原版書</a> <a href="#">港臺圖書</a> <a href="#">工具書</a> <a href="#">套裝書</a>
<a href="#">雜志/期刊</a>
</dd>
</dl>
</div>
<div class="rightdiv">
<dl>
<dd>
<a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html">
<img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg"
width="194" height="70" title="\家電">
</a>
</dd>
<dd>
<a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html">
<img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg"
width="194" height="70" title="小家電--三請聚寶盆">
</a>
</dd>
</dl>
<dl>
<dt>推薦品牌</dt>
<dd>
<a href="#">美的官方旗艦店</a>
</dd>
<dd>
<a href="#">蘇泊爾旗艦店</a>
</dd>
<dd>
<a href="#">九陽旗艦店</a>
</dd>
<dd>
<a href="#">東菱旗艦店</a>
</dd>
<dd>
<a href="#">海爾統(tǒng)帥旗艦店</a>
</dd>
<dd>
<a href="#">小熊旗艦店</a>
</dd>
</dl>
<img src="wii.png" class="rightPic" />
</div>
</div>
</li>
<li><a href="#">家用電器</a></li>
<li><a href="#">手機、數(shù)碼</a></li>
<li><a href="#">電腦、辦公</a></li>
<li><a href="#">家居、家具、家裝、廚具</a></li>
<li><a href="#">服飾內衣、珠寶首飾</a></li>
<li><a href="#">個護化妝</a></li>
<li><a href="#">鞋靴、箱包、鐘表、奢侈品</a></li>
<li><a href="#">運動戶外</a></li>
<li><a href="#">汽車用品</a></li>
<li><a href="#">母嬰、玩具樂器</a></li>
<li><a href="#">食品飲料、酒類、生鮮</a></li>
<li><a href="#">營養(yǎng)保健</a></li>
</ul>
</body>
</html>
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
