編程練習
小伙伴們，請為大類LI添加鼠標移上效果
效果圖:
溫馨提示:完成任務后，請驗證是否與實踐描述效果一致，如一致，恭喜您，你已經(jīng)掌握此技能。
任務
在編輯器第57行處完成如下任務，當鼠標移動到大類菜單時，顯示外外光的邊框，右側無邊框
提示：設置LI鼠標移上時有外發(fā)光，且有邊框，右側無邊框，無背景圖片
1. 修改li:hover樣式
2.設置邊框及外發(fā)光效果
3.對chrome和firefox等瀏覽器設置外發(fā)光效果
4.刪除背景圖片
- ?不會了怎么辦
-
參考代碼:
.topmenu li:hover
{
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;
}
<!DOCTYPE html>
<html>
<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 li:hover
{
/* 任務編寫代碼處 */
}
.topmenu li:hover .submenu
{
display: block;
}
.topmenu li:hover span
{
background: white;
display: inline-block;
z-index: 20;
width: 20px;
height: 30px;
float: right;
position: relative;
}
</style>
</head>
<body>
<ul class="topmenu">
<div class="toptitle">
全部商品分類
</div>
<li><a href="#">圖書、音像、數(shù)字商品</a><span></span> </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ù)過多，請先驗證，完成再次請求
