首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

子元素会触发父元素的鼠标移出事件

作者： | 来源：互联网 | 2023-09-04 18:14
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73


   


     


       

     


     


       

     


     


       

     


   


 

js



1
2
3
4
5
6
$('.nTitle').on('mouseover','li.nTitle-item',function(){

    $(this).children('div.row').removeClass('d-none');

  })

  $('.nTitle').on('mouseout','li.nTitle-item',function(){

    $(this).children('div.row').addClass('d-none');

  })

css

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/*#topL-nav{*/

  /*float: left;}*/

.logo{

  display: inline-block;

  height: 4rem;



}

.logo span{

  display: inline-block;

  width: 124px;

  height: 21px;

  background-image: url(../img/svg-logo.svg);

  background-size: 100% auto;

  margin-top: 1.5rem;

}

.search{

  display: inline-block;

  margin-bottom: -4px;

  width: 20px;

  height: 20px;

  background-image: url(../img/ico-new-gnb-searh.svg);

  background-size: 100% auto;

}

.topL-nav a{

  position: relative;

}

.topL-nav>ul>li>a::after{

  position: absolute;

  display: block;

  content: "";

  margin: 0 auto;

  text-align: center;

  width: 0%;

  height: 4px;

  background: #162d9a;

  bottom: -1.5rem;

}



.topL-nav>ul>li>a:hover::after {

  width: 100%;

  transition: all 1s;

}

/*动画*/

.maskNav li{

  display: block;

  width: 100%;

  margin-top: 0.5rem;

  margin-bottom: 1rem;

}

.maskNav-pic a,.maskNav-pic b,.maskNav-pic span{

  display: block;

  width: 100%;

}

.maskNav-pic a{

  height: 100%;

  position: relative;

}

.maskNav-pic b{

  position: absolute;

  text-align: center;

  font-size: 20px;

  height: 3rem;

  line-height: 3rem;

  top: 0.8rem;

}

.maskNav-pic span{

  position: absolute;

  width: 40%;

  margin-left: -20%;

  text-align: center;

  font-size: 12px;

  height: 1.5rem;

  line-height: 1.5rem;

  border: 1px solid #000;

  border-radius: 3rem;

  top: 3.6rem;

  left: 50%;

}

.maskNav-pic span:hover{

  color: #fff;

  background-color: #000;

  transition: all 1s;

}

#nList{

  top: 65px;

}



   



推荐阅读
author-avatar
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有