这段CSS和JavaScript代码展示了如何通过:hover伪类和JavaScript事件监听实现元素的动态交互。当鼠标悬停在.oneli元素上时，对应的.id为two的子元素会显示出来，背景颜色变为#6B8E23，文字颜色变为#FFA500。这种技术常用于创建响应式和交互式的网页界面。
* {
margin:0;
padding:0;
color:white;
outline:none;
}
ul {
font-size:0;
}
ul,li {
list-style:none;
}
.box {
font-size:14px;
width:100%;
}
.one li {
font-size:14px;
width:20%;
line-height:60px;
margin:0 auto;
text-align:center;
display:inline-block;
background-color:#FFA500;
}
.one li:hover {
background-color:#6B8E23;
color:#FFA500;
}
#box .two {
color:#000;
width:20%;
line-height:60px;
text-align:center;
font-size:0px;
position:absolute;
display:none;
}
#box .two li {
width:100%;
}
#box .two li:hover {
background-color:gold;
color:#fff;
}
#box .one {
position:relative;
}
#box .two2 {
left:20%;
}
#box .two3 {
left:40%;
}
#box .two4 {
left:60%;
}
#box .two5 {
left:80%;
}
#box .one .one_1:hover .two1 {
display:block;
}
#box .one .one_2:hover .two2 {
display:block;
}
#box .one .one_3:hover .two3 {
display:block;
}
#box .one .one_4:hover .two4 {
display:block;
}
#box .one .one_5:hover .two5 {
display:block;
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
