84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
p.title>p.list.list{display:none;}.title:hover .list{display:block;}原理大概就是使用css伪类来达到hover状态响应,从而改变下拉内容的显示。
下拉菜单,如果是css的话,可以直接用父class:hover 子class然后设置opacity:1甚至可以加上过渡效果。
class:hover 子class
opacity:1
利用css的伪类来实现class:hover,如果要使用过渡,那就有好几种办法了
class:hover
使用浏览器开发工具就可以查看其代码结构,爱奇艺是点击事件监听,把下拉菜单由display:none;改成display:block;用CSS的话,就只能使用伪类实现吧,楼上的回复那样。
完全使用CSS只能做出一模一样的样式,但是所有的点击事件必须用js来完成。
p.title>p.list
.list{
display:none;
}
.title:hover .list{
display:block;
}
原理大概就是使用css伪类来达到hover状态响应,从而改变下拉内容的显示。
下拉菜单,如果是css的话,可以直接用父
class:hover 子class
然后设置opacity:1
甚至可以加上过渡效果。利用css的伪类来实现
class:hover
,如果要使用过渡,那就有好几种办法了使用浏览器开发工具就可以查看其代码结构,爱奇艺是点击事件监听,把下拉菜单由display:none;改成display:block;用CSS的话,就只能使用伪类实现吧,楼上的回复那样。