显示与隐藏

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

.sub-menu{
    width: 730px;
    height: 458px;
    border: 1px solid #d9dde1;
    background: #fff;
    position: absolute;
    left: 244px;
    top: 0;
    z-index: 999;
    box-shadow: 0 4px 8px rgba(0,0,0,0,1);
}
 
.inner-box{
    width: 100%;
    height: 100%;
    background: url(../img/fe.png) no-repeat;
    display: none; 
}
 
.sub-inner-box{
    width: 652px;
    margin-left: 40px;
    overflow: hidden;  
}
 
.title{
    color: #f01414;
    font-size: 16px;
    line-height: 16px;
    margin: 28px 0 30px 0;
    font-weight: bold;
}
 
.sub-row{
    margin-bottom: 25px;
}
 
.bold{
    font-weight: bold; 
}
 
.mr10{
    margin-right: 10px;
}
 
.ml10{
    margin-left: 10px;
}
 
.hide{
    display: none;
}

这里老师讲的显示与隐藏有点整不明白，1. inner-box设置display：none能理解，想要谁显示就通过js设置显示即可，但不明白为什么要把sub-menu一起隐藏？2. 既然要sub-menu隐藏，为什么给sub-menu单独设置一个hide类去隐藏它，而不直接加在sub-menu的样式里呢？以及，不去设置sub-menu的背景颜色，不也看起来像隐藏了么？请老师给详细讲讲

安伯伯 2019-03-14

源自：项目：JS实现轮播特效 4-5 子菜单结构和样式（2）

0

收起

2回答

Steve007 回答被采纳获得+3积分 2019-03-15 10:31:22

同学，你好。如果不把sub-menu隐藏，把sub-menu设置成背景透明，让它一直待在那，当鼠标移出时，鼠标最后一次移入的子菜单就不会隐藏，会显示在页面上，因此要给sub-menu设置隐藏，从而隐藏鼠标最后一次滑过时弹出的子菜单。

给inner-box设置显示隐藏，是实现当鼠标滑过哪个大分类时，让哪个大分类的子菜单显示，其它大分类的子菜单隐藏，实现不了鼠标移出，鼠标最后一次移入的子菜单隐藏，因此要给sub-menu设置隐藏样式来实现这个功能。

祝学习愉快！

安伯伯提问者 #1

明白了，很详细。谢谢

2019-03-15 10:50:09

Steve007 2019-03-14 19:21:30

同学，你好。

1.sub-menu是所有子菜单外面的大盒子，inner-box是里面的内容，当inner-box隐藏时，只是内容被隐藏了，外面的大盒子还是存在的，如图：

所以要给sub-menu设置隐藏样式，

2.给sub-menu单独设置一个hide类，是因为我们要通过js来操控这个类，鼠标滑过去掉这个类，让内容显示，鼠标移出添加这个类，让内容隐藏。

3.同学说的设置sub-menu的背景颜色也是可以的，设置sub-menu的背景颜色为透明，通过js操控，当鼠标划过时，通过js设置它的背景颜色为白色。

祝学习愉快！

提问者安伯伯 #1

我的疑问是，为什么要把sub-menu隐藏？把sub-menu设置成背景透明，让它一直待在那（因为背景透明，所以也看不出来），inner-box自己去做显示与隐藏的操作不行么？

2019-03-15 09:23:32

相似问题

为什么我绑定了transition只是没有动画了但还是可以实现显示和隐藏？

显示和隐藏

滚动条框没被隐藏

关于隐藏属性的问题

老师的代码中，显示与隐藏的效果，逻辑没搞清楚，如下：

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

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36712 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

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

帮助反馈 APP下载

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

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