慕课网

第3章商城分类导航实现（JS版）
视频：3-1 JS实现特效(08:24)
编程：3-2 编程练习

编程练习

小伙伴们，请为大类LI添加鼠标移上效果

效果图:

温馨提示:完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能。

任务

在编辑器第57行处完成如下任务，当鼠标移动到大类菜单时，显示外外光的边框，右侧无边框

提示：设置LI鼠标移上时有外发光，且有边框，右侧无边框，无背景图片

1. 修改li:hover样式

2.设置边框及外发光效果

3.对chrome和firefox等浏览器设置外发光效果

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;

        }

index.html

<!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="#">图书、音像、数字商品</a><span></span> </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="#">母婴、玩具乐器</a></li> <li><a href="#">食品饮料、酒类、生鲜</a></li> <li><a href="#">营养保健</a></li> </ul> </body> </html>

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

2-4 编程练习

编程练习

任务

写笔记

收藏课程后，能更快找到我哦～