編程練習(xí)
小伙伴們，請(qǐng)為大類LI添加鼠標(biāo)移上效果
效果圖:
溫馨提示:完成任務(wù)后，請(qǐng)驗(yàn)證是否與實(shí)踐描述效果一致，如一致，恭喜您，你已經(jīng)掌握此技能。
任務(wù)
在編輯器第57行處完成如下任務(wù)，當(dāng)鼠標(biāo)移動(dòng)到大類菜單時(shí)，顯示外外光的邊框，右側(cè)無(wú)邊框
提示：設(shè)置LI鼠標(biāo)移上時(shí)有外發(fā)光，且有邊框，右側(cè)無(wú)邊框，無(wú)背景圖片
1. 修改li:hover樣式
2.設(shè)置邊框及外發(fā)光效果
3.對(duì)chrome和firefox等瀏覽器設(shè)置外發(fā)光效果
4.刪除背景圖片
- ?不會(huì)了怎么辦
-
參考代碼:
.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
{
/* 任務(wù)編寫代碼處 */
}
.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="#">手機(jī)、數(shù)碼</a></li>
<li><a href="#">電腦、辦公</a></li>
<li><a href="#">家居、家具、家裝、廚具</a></li>
<li><a href="#">服飾內(nèi)衣、珠寶首飾</a></li>
<li><a href="#">個(gè)護(hù)化妝</a></li>
<li><a href="#">鞋靴、箱包、鐘表、奢侈品</a></li>
<li><a href="#">運(yùn)動(dòng)戶外</a></li>
<li><a href="#">汽車用品</a></li>
<li><a href="#">母嬰、玩具樂(lè)器</a></li>
<li><a href="#">食品飲料、酒類、生鮮</a></li>
<li><a href="#">營(yíng)養(yǎng)保健</a></li>
</ul>
</body>
</html>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
