我自己做了个练习，老师帮我看看伪类元素，谢谢老师

我自己做了个练习，老师帮我看看伪类元素，谢谢老师

当我鼠标悬浮上去的时候，为什么下边框为什么不显示白色背景。。

以下是原图效果

http://img1.sycdn.imooc.com//climg/5e0adc22094f228505500154.jpg

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title>增值保障</title>
   <link rel="stylesheet" href="style6.css">
</head>
<body>
   <div>
       <div class="dd" id="dd">
           <div class="sevice-type-yb clearfix">
               <div class="yb-item-cat">
               <div class="yb-item">
                   <img class="icon" src="img/59b1f5a3Nf2341900.png">
                   <span class="name">无忧洗3双</span>
                   <span class="price">￥69</span>
                   <i class="arrow-icon"></i>
               </div>
               <div class="more-item">
                   <ul>
                       <li>
                       <div class="title" title="3双鞋靴清洗、保养、杀菌服务">
                           <span class="choose-btn">
                           <i class="sprite-checkbox"></i>
                           <span class="name">无忧洗3双</span>
                           <span class="price">￥69</span>
                           </span>
                           <a href="#" class="detail-more">
                               详情
                               <s class="s-arrow">>></s>
                           </a>
                       </div>
                       </li>
                       <li>
                           <div class="title" title="5双鞋靴清洗、保养、杀菌服务">
                               <span class="choose-btn">
                                   <i class="sprite-checkbox"></i>
                                   <span class="name">无忧洗5双</span>
                                   <span class="price">￥109</span>
                               </span>
                               <a href="#" class="detail-more">
                                   详情
                                   <s class="s-arrow">>></s>
                               </a>
                           </div>
                       </li>
                   </ul>
               </div>
               </div>
               <div class="yb-item-cat">
                   <div class="yb-item">
                       <img class="icon" src="img/5992a59bNd253524f.png">
                       <span class="name">首月意外保</span>
                       <span class="price">￥9.9</span>
                       <i class="arrow-icon"></i>
                   </div>
                   <div class="more-item">
                       <ul>
                           <li>
                            <div class="title" title="首月意外破损免费维修">
                           <span class="choose-btn">
                           <i class="sprite-checkbox"></i>
                           <span class="name">首月意外保</span>
                           <span class="price">￥9.9</span>
                           </span>
                                   <a href="#" class="detail-more">
                                       详情
                                       <s class="s-arrow">>></s>
                                   </a>
                               </div>
                           </li>
                       </ul>
                   </div>
               </div>
               <div class="service-tips">
                   <a href="#">
                       <i class="sprite-question"></i>
                   </a>
                   <div class="tips">
                       <div class="sprote-arrow"></div>
                       <div class="content">
                           <dl>
                               <dd>
                                   增值保障是指凡在京东购买商品或服务的消费者，在保障期间内遇到无论是正常使用中的问题还是意外事故，即可享受增值保障服务。保障内容包括：延长保修、只换不修、意外保护、服务保障。覆盖家电、手机数码、电脑办公、汽车用品、服饰家居等商品。
                               </dd>
                           </dl>
                           <p>
                               增值保障服务，只能提供增值税普通电子发票，如有疑问，请与
                               <a href="#">在线客服</a>联系
                           </p>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>
</body>
</html>

*{
   margin: 0;
   padding: 0;
}
body{
   font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
   margin-top: 30px;
   color: #666;
}
.dd{
   width: 520px;
   margin: auto;
}
a{
   text-decoration: none;
}
ul{
   list-style: none;
}
.sevice-type-yb .yb-item-cat{
   float: left;
   position: relative;
}
.sevice-type-yb .yb-item-cat .yb-item{
   padding:4px 5px 4px 6px;
   margin:  0 7px 2px 0;
   border: 1px solid #ccc;
   line-height: 20px;
   position: relative;
   font-size: 0;
   cursor: pointer;
}
.yb-item .icon{
   display: inline-block;
   width: 16px;
   height: 16px;
   margin-right: 4px;
}
img{
   border: 0;
   vertical-align: middle;
}
.yb-item .name{
   font-size: 12px;
   margin-right: 4px;
   vertical-align: middle;
   max-width: 60px;
   height: 20px;
   overflow: hidden;
   display: inline-block;
}
.yb-item .price{
   margin-right: 5px;
   vertical-align: middle;
   font: 12px/150% Arial,Verdana,"\5b8b\4f53";
}
.sevice-type-yb .yb-item-cat:hover .arrow-icon{
   background-position: -2px -38px;
}
.yb-item .arrow-icon{
   display: inline-block;
   width: 15px;
   height: 10px;
   vertical-align: middle;
   background: url("img/service-icon.png") -2px -1px;
}
.sprite-question{
   display: inline-block;
   vertical-align: -10px;
   width: 16px;
   height: 16px;
   background-image: url("img/__sprite.png");
   background-position: 0 0;
}
.service-tips .tips{
   z-index: 2;
   width: 270px;
   position: absolute;
   left: 581px;
   top: 66px;
   display: none;
}
.service-tips .tips .sprote-arrow{
   width: 11px;
   height: 6px;
   background-image: url("img/__sprite.png");
   background-position: -14px -16px;
   position: absolute;
   overflow: hidden;
   left: 218px;
   top: -5px;
}
.service-tips .tips .content{
   padding: 10px;
   background: #fff;
   border: 1px solid #cecbce;
   color: #666;
   box-shadow: 0 0 2px 2px #eee;
}
.service-tips .tips .content dd{
   line-height: 170%;
}
.service-tips .tips .content p{
   border-top: 1px dotted #999;
   margin-top: 7px;
   padding-top: 7px;
}
.service-tips .tips .content p a{
   color: #5e69ad;
   margin: 0 5px;
}
.service-tips:hover .tips{
   display: block;
}
.sevice-type-yb .yb-item-cat .more-item{
   display: none;
   position: absolute;
   top: 29px;
   background-color: #FFF;
   border:1px solid #DDD;
   padding: 10px 0 5px 10px;
   width: 240px;
   overflow: hidden;
   z-index: 1;
}
ul li{
   margin-bottom: 10px;
}
ul li .title{
   height: 16px;
}
.sprite-checkbox{
   width: 14px;
   height: 14px;
   background-image: url("img/__sprite.png");
   background-position: 0 -16px;
}
.sprite-checkbox{
   display: inline-block;
   vertical-align: -3px;
   margin-right: 6px;
   width: 14px;
   height: 14px;
   background-image: url("img/__sprite.png");
   background-position: -16px 0;
}
ul li .title .price{
   margin-right: 0;
   margin-left: 3px;
}
ul li .name{
   margin-left: -4px;
}
.detail-more {
   display: none;
   margin-left: 8px;
   color: #5e69ad;
}
.s-arrow{
   font-family: SimSun;
   text-decoration: none;
}
.yb-item-cat:hover .more-item{
   display: block;
}
.title:hover .detail-more{
   display: inline-block;
}
.sevice-type-yb .yb-item-cat:hover .yb-item{
   border-bottom-color: #FFF;
}
.sevice-type-yb .yb-item-cat .yb-item:hover{
   border: 1px solid #e3393c;
}
.title span:hover{
   color:#e3393c ;
}
http://img1.sycdn.imooc.com//climg/5e0adc8c09d4abe606870149.jpg
慕妹8524794 2019-12-31
源自：CSS选择的艺术   3-19 伪类选择器
30
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

6回答
好帮手慕慕子 回答被采纳获得+3积分 2019-12-31 18:13:15

同学你好， 可以给service-tips设置相对定位让下面的文字参考他的父级元素进行定位，然后调整文字的位置， 并给service-tips设置固定的高度，实现效果。

http://img1.sycdn.imooc.com//climg/5e0b1eb80934bb1104400412.jpg

效果图：

http://img1.sycdn.imooc.com//climg/5e0b1f3309a0762006920290.jpg

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0
收起回答
  • 慕妹8524794 提问者 #1
    好的，谢谢老师
    2019-12-31 18:18:47
提问者 慕妹8524794 2019-12-31 17:44:33

http://img1.sycdn.imooc.com//climg/5e0b184b0943616003890319.jpg

这是原图。。

我自己实现的，鼠标悬浮上去，当我鼠标进入文字的时候，弹框就消失了。

0
收起回答
好帮手慕慕子 2019-12-31 17:40:28

同学你好， 老师测试你粘贴的这部分代码，效果实现的没有问题。如下：

http://img1.sycdn.imooc.com//climg/5e0b175a0974921104050137.jpg

建议： 同学清除浏览器缓存， 或者换个浏览器测试一下。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0
收起回答
  • 提问者 慕妹8524794 #1
    好奇怪，我这里清除浏览器缓存了，还是不行。。老师帮我看看最后一个问题，当我鼠标悬浮在问号图标上面，为什么我的鼠标不能停留在文字上面？
    2019-12-31 17:43:33
提问者 慕妹8524794 2019-12-31 15:35:57

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title>增值保障</title>
   <link rel="stylesheet" href="style6.css">
</head>
<body>
   <div>
       <div class="dd" id="dd">
           <div class="sevice-type-yb clearfix">
               <div class="yb-item-cat">
               <div class="yb-item">
                   <img class="icon" src="img/59b1f5a3Nf2341900.png">
                   <span class="name">无忧洗3双</span>
                   <span class="price">￥69</span>
                   <i class="arrow-icon"></i>
               </div>
               <div class="more-item">
                   <ul>
                       <li>
                       <div class="title" title="3双鞋靴清洗、保养、杀菌服务">
                           <span class="choose-btn">
                           <i class="sprite-checkbox"></i>
                           <span class="name">无忧洗3双</span>
                           <span class="price">￥69</span>
                           </span>
                           <a href="#" class="detail-more">
                               详情
                               <s class="s-arrow">>></s>
                           </a>
                       </div>
                       </li>
                       <li>
                           <div class="title" title="5双鞋靴清洗、保养、杀菌服务">
                               <span class="choose-btn">
                                   <i class="sprite-checkbox" id="spriteCheckbox"></i>
                                   <span class="name" id="name">无忧洗5双</span>
                                   <span class="price" id="price">￥109</span>
                               </span>
                               <a href="#" class="detail-more">
                                   详情
                                   <s class="s-arrow">>></s>
                               </a>
                           </div>
                       </li>
                   </ul>
               </div>
               </div>
               <div class="yb-item-cat">
                   <div class="yb-item">
                       <img class="icon" src="img/5992a59bNd253524f.png">
                       <span class="name">首月意外保</span>
                       <span class="price">￥9.9</span>
                       <i class="arrow-icon"></i>
                   </div>
                   <div class="more-item">
                       <ul>
                           <li>
                            <div class="title" title="首月意外破损免费维修">
                           <span class="choose-btn">
                           <i class="sprite-checkbox"></i>
                           <span class="name">首月意外保</span>
                           <span class="price">￥9.9</span>
                           </span>
                                   <a href="#" class="detail-more">
                                       详情
                                       <s class="s-arrow">>></s>
                                   </a>
                               </div>
                           </li>
                       </ul>
                   </div>
               </div>
               <div class="service-tips">
                   <a href="#">
                       <i class="sprite-question"></i>
                   </a>
                   <div class="tips">
                       <div class="sprote-arrow"></div>
                       <div class="content">
                           <dl>
                               <dd>
                                   增值保障是指凡在京东购买商品或服务的消费者，在保障期间内遇到无论是正常使用中的问题还是意外事故，即可享受增值保障服务。保障内容包括：延长保修、只换不修、意外保护、服务保障。覆盖家电、手机数码、电脑办公、汽车用品、服饰家居等商品。
                               </dd>
                           </dl>
                           <p>
                               增值保障服务，只能提供增值税普通电子发票，如有疑问，请与
                               <a href="#">在线客服</a>联系
                           </p>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>
   <script src="script6.js"></script>
</body>
</html>


*{
   margin: 0;
   padding: 0;
}
body{
   font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
   margin-top: 30px;
   color: #666;
}
.dd{
   width: 520px;
   margin: auto;
}
a{
   text-decoration: none;
}
ul{
   list-style: none;
}
.sevice-type-yb .yb-item-cat{
   float: left;
   position: relative;
}
.sevice-type-yb .yb-item-cat .yb-item{
   padding:4px 5px 4px 6px;
   margin:  0 7px 2px 0;
   border: 1px solid #ccc;
   line-height: 20px;
   position: relative;
   font-size: 0;
   cursor: pointer;
   z-index: 3;
}
.yb-item .icon{
   display: inline-block;
   width: 16px;
   height: 16px;
   margin-right: 4px;
}
img{
   border: 0;
   vertical-align: middle;
}
.yb-item .name{
   font-size: 12px;
   margin-right: 4px;
   vertical-align: middle;
   max-width: 60px;
   height: 20px;
   overflow: hidden;
   display: inline-block;
}
.yb-item .price{
   margin-right: 5px;
   vertical-align: middle;
   font: 12px/150% Arial,Verdana,"\5b8b\4f53";
}
.sevice-type-yb .yb-item-cat:hover .arrow-icon{
   background-position: -2px -38px;
}
.yb-item .arrow-icon{
   display: inline-block;
   width: 15px;
   height: 10px;
   vertical-align: middle;
   background: url("img/service-icon.png") -2px -1px;
}
.sprite-question{
   display: inline-block;
   vertical-align: -10px;
   width: 16px;
   height: 16px;
   background-image: url("img/__sprite.png");
   background-position: 0 0;
}
.service-tips .tips{
   z-index: 2;
   width: 270px;
   position: absolute;
   left: 581px;
   top: 66px;
   display: none;
}
.service-tips .tips .sprote-arrow{
   width: 11px;
   height: 6px;
   background-image: url("img/__sprite.png");
   background-position: -14px -16px;
   position: absolute;
   overflow: hidden;
   left: 218px;
   top: -5px;
}
.service-tips .tips .content{
   padding: 10px;
   background: #fff;
   border: 1px solid #cecbce;
   color: #666;
   box-shadow: 0 0 2px 2px #eee;
}
.service-tips .tips .content dd{
   line-height: 170%;
}
.service-tips .tips .content p{
   border-top: 1px dotted #999;
   margin-top: 7px;
   padding-top: 7px;
}
.service-tips .tips .content p a{
   color: #5e69ad;
   margin: 0 5px;
}
.service-tips:hover .tips{
   display: block;
}
.sevice-type-yb .yb-item-cat .more-item{
   display: none;
   position: absolute;
   top: 29px;
   background-color: #FFF;
   border:1px solid #DDD;
   padding: 10px 0 5px 10px;
   width: 240px;
   overflow: hidden;
   z-index: 1;
}
ul li{
   margin-bottom: 10px;
}
ul li .title{
   height: 16px;
}
.sprite-checkbox{
   width: 14px;
   height: 14px;
   background-image: url("img/__sprite.png");
   background-position: 0 -16px;
}
.sprite-checkbox{
   display: inline-block;
   vertical-align: -3px;
   margin-right: 6px;
   width: 14px;
   height: 14px;
   background-image: url("img/__sprite.png");
   background-position: -16px 0;
}
ul li .title .price{
   margin-right: 0;
   margin-left: 3px;
}
ul li .name{
   margin-left: -4px;
}
.detail-more {
   display: none;
   margin-left: 8px;
   color: #5e69ad;
}
.s-arrow{
   font-family: SimSun;
   text-decoration: none;
}
.yb-item-cat:hover .more-item{
   display: block;
}
.title:hover .detail-more{
   display: inline-block;
}
.sevice-type-yb .yb-item-cat:hover .yb-item{
   border: 1px solid #e3393c;
   border-bottom-color: #fff;
}
.title span:hover{
   color:#e3393c;
}

0
收起回答
提问者 慕妹8524794 2019-12-31 14:42:07

http://img1.sycdn.imooc.com//climg/5e0aed89099c5f7004810094.jpg

http://img1.sycdn.imooc.com//climg/5e0aeda009f2eb7f04980240.jpg

http://img1.sycdn.imooc.com//climg/5e0aedae09d042a407560378.jpg

0
收起回答
  • 好帮手慕慕子 #1
    同学你好， 老师这边修改后是可以实现效果的， 建议：同学清除浏览器缓存测试一下，如果还有问题，可以将你修改后的代码粘贴过来，便于老师帮助同学准确的定位与解决问题，祝学习愉快~
    2019-12-31 15:31:01
  • 提问者 慕妹8524794 回复 好帮手慕慕子 #2
    代码我已经重新上传了，麻烦老师在帮我看看
    2019-12-31 15:36:20
好帮手慕慕子 2019-12-31 14:08:06

同学你好， 因为.yb-item的hover样式设置的边框样式在后面，覆盖了前面设置的下边框为白色样式，所以无法实现效果，建议：直接在鼠标移入.yb-item-cat设置yb-item元素的边框样式。示例：

http://img1.sycdn.imooc.com//climg/5e0ae4f609eeb65c07070209.jpg

修改后，鼠标移入下边框确实变为白色了，但是与同学想要的效果图不符，此时的下边框是more-item元素的。

http://img1.sycdn.imooc.com//climg/5e0ae52d0938612303470122.jpg

建议：可以给yb-item元素添加z-index属性，示例：值为3， 提升显示层级，覆盖more-item元素的边框。实现效果。

http://img1.sycdn.imooc.com//climg/5e0ae5900929be9405830299.jpg

效果图：

http://img1.sycdn.imooc.com//climg/5e0ae5a909b92ddc03230119.jpg

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0
收起回答
  • 提问者 慕妹8524794 #1
    老师，为什么我这还是不可以实现，帮忙在看看
    2019-12-31 14:40:57
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

方法三的伪元素
0 0 3
老师可以帮我看看这道题吗？谢谢老师
53 1 10
伪元素和伪类怎么区分？
8 0 3
自己做了一个练习题，麻烦老师帮我看一下JS代码，谢谢老师
37 0 4
::befor/after 伪元素 定位特点
17 0 3

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师