老师，为什么鼠标放在姓名填写规则上，不出现隐藏的部分？？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/css.css"> </head> <body> <div class="container"> <!--头部--> <header class="header"> <div class="logo">慕课高铁服务中心 <span class="line">|</span> <span class="suv">客户服务</span></div> <div class="nav">意见反馈 <span class="special">imooc@com</span> 您好，请<span class="special">登录</span> | 注册 <div class="list"> <span class="imooc">我的imooc</span><span class="sanjiao"></span> <ul> <li>未完成订单</li> <li>已完成订单(改/退)</li> <li >我的保险</li> <li>查看个人信息</li> <li>账户安全</li> <li>常用联系人</li> <li>重点旅客预约</li> <li>遗失物品查找</li> <li>服务查询</li> <li>投诉</li> <li>建议</li> </ul> </div> <div class="phone">手机版</div> </header> <!--中间内容--> <div class="wrap"> <div class="box"> <div class="active">您现在的位置：<span class="customindex">客户首页>注册</span></div> <div class="content"> <div class="top">账户信息</div> <div class="register"> <!--——————————————————————————用户名——————————————————————————————--> <p> <span class="star">*</span> <label for="username">用户名</label>: <input type="text" id="username" placeholder="用户设置成功后不可修改"/> <span id="word">6-30位字母、数字或“_”,字母开头</span> </p> <!--——————————————————————————登录密码——————————————————————————————--> <p> <span class="star">*</span> <label for="pwd">登录密码</label>: <input type="password" id="pwd" placeholder="6-20位字母，数字或符号"/> <span class="line line1" ></span><span class="line"></span><span class="line" ></span> <div id="word"></div> </p> <!--——————————————————————————确认密码——————————————————————————————--> <p> <span class="star">*</span> <label for="pwdagain">确认密码</label>: <input type="password" id="pwdagain" placeholder="再次输入您的登录密码"/> <span id="word"></span> </p> <!--——————————————————————————姓名——————————————————————————————--> <p> <span class="star">*</span> <label for="name1">姓名</label>: <input type="text" id="name1" placeholder="请输入姓名"/> <span class="reguer" id="word">姓名填写规则</span> <div class="nameregulation" id="nameregulation"> 1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。<br/> 2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉子的拼音或同音字重新修改<br/>后保存。<br/> 3.姓名中有繁体字无法输入时，可用简体替代。<br/> 4.姓名较长，汉字与英文字符合计超过30个（1个汉子算2个字符）的，需按姓名中第一<br/>个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输<br/>入时不去别大小写 </div> </p> <!--——————————————————————————证件类型——————————————————————————————--> <p> <span class="star">*</span> <label for="name1">证件类型</label>: <select> <option value="idcard">二代身份证</option> <option value="gangao">港澳通行证</option> <option value="taiwan">台湾通行证</option> <option value="huzhao">护照</option> </select> </p> <!--——————————————————————————证件号码——————————————————————————————--> <p> <span class="star">*</span> <label for="num">证件号码</label>: <input type="text" id="num" placeholder="请输入您的证件号码"/> <span id="word"></span> </p> <!--——————————————————————————邮箱——————————————————————————————--> <p> <span class="star">*</span> <label for="email">邮箱</label>: <input type="text" id="email" placeholder="请正确填写邮箱地址"/> <span id="word"></span> </p> <!--——————————————————————————手机号码——————————————————————————————--> <p> <span class="star">*</span> <label for="phonenum">手机号码</label>: <input type="text" id="phonenum" placeholder="请输入您的手机号码"/> <span id="word">请正确填写手机号码，稍后将向该手机号码发送短信验证码</span> </p> <!--——————————————————————————旅客类型—————————————————————————————--> <p> <span class="star">*</span> <label for="type">旅客类型:</label> <select> <option value="adult">成人</option> <option value="child">儿童</option> <option value="student">学生</option> <option value="soldier">残疾军人</option> <option value="plice">伤残人民警察</option> </select> </p> <p> <label for="type"></label> <input type="checkbox" id="choose"> <span class="end">我已阅读并同意遵守规定<span class="item">《中国铁路客户服务中心网站服务条款》</span></span> </p> <!--——————————————————————————按钮—————————————————————————————--> <input type="button" value="下一步" class="btn" id="btn"> </div> </div> </div> </div> <footer class="foot"> <div class="banquan"> <div>关于我们|网站声明</div> <div>Copyright © 2017 imooc.com All Rights Reserved | 京ICP备1304664号-2</div> </div> </footer> </div> <script src="js/js.js"></script> </body> </html>
body{
padding:0;
margin:0;
}
.container{
width:100%;
min-width: 1200px;
}
/*头部*/
.header{
width: 100%;
height: 120px;
background-color:#efefef;
position: relative;
border-bottom: 2px solid rgb(36, 135, 201);
}
/*logo 左边部分*/
.logo{
width: 470px;
height: 120px;
line-height: 120px;
margin-left: 35px;
background: url("../img/logo.png") no-repeat left center;
background-size: 110px 110px;
position: absolute;
top:50%;
margin-top:-60px;
text-indent: 120px;
color: #333;
font-size: 20px;
}
.logo .suv{
font-size: 18px;
color: #666;
}
.line{
font-weight: bold;
color: #000;
}
/*nav 右边部分*/
.header .nav{
width: 620px;
height: 120px;
position: absolute;
right:30px;
line-height: 120px;
}
.nav .special{
color: #fb7403;
margin:0 5px 0 5px;
cursor: pointer;
}
.phone{
width:80px;
height:40px;
background: url("../img/phone.png") no-repeat left center;
background-size: 20px 40px;
position: absolute;
right: 70px;
top:50%;
margin-top:-20px;
line-height: 40px;
text-indent: 30px;
cursor: pointer;
}
/*倒三角形*/
.sanjiao{
position: absolute;
top:50%;
margin-top:-5px;
margin-left: 10px;
display: inline-block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 12px solid black;
cursor: pointer;
}
.imooc:hover{
cursor: pointer;
color: #fb7403;
}
.list{
display: inline-block;
width:200px;
position: absolute;
margin-left: 10px;
}
/*鼠标放在div上时 显示隐藏部分*/
.list:hover ul{
display: block;
}
ul{
width: 110px;
background: #fff;
line-height: 30px;
position: absolute;
right:80px;
font-size: 12px;
list-style: none;
padding-left:10px;
top:80px;
border:1px solid #fb7403;
display: none;
color: rgb(139, 139, 139);
z-index: 999999;;
}
li{
width:100px;
height: 30px;
line-height: 30px;
}
li:hover{
cursor: pointer;
color: #fb7403;
}
/*虚线样式*/
li:nth-child(2),li:nth-child(3),li:nth-child(5),li:nth-child(6),li:nth-child(8),li:nth-child(9){
border-bottom: 1px dotted rgb(112, 111, 111);
}
/*中间内容*/
.box{
width: 900px;
/* height: 800px; */
margin:0 auto;
}
.active{
margin-top:10px;
}
.customindex{
color: #636363;
}
.content{
width: 900px;
border:1px solid #fb7403;
margin-top:10px;
border-radius: 10px;
}
.content .top{
width: 100%;
height: 40px;
background-color: #fb7403;
border-radius: 5px;
color: #fff;
text-indent: 10px;
line-height: 40px;
}
/*注册部分*/
.register{
width:800px;
margin-left: 120px;
margin-top:50px;
position: relative;
}
label{
display: inline-block;
width: 80px;
text-align: justify;
text-align-last: justify;
}
select{
width:166px;
height: 22px;
}
.end{
font-size: 14px;
}
.item{
color: #138fd1;
}
.pwdcontainer{
display: inline-block;
}
/*提交按钮*/
.btn{
width:200px;
height: 40px;
background-color: #fb7403;
border: none;
border-radius: 5px;
color: #fff;
margin:30px 0 60px 100px;
outline: none;
cursor: pointer;
}
.btn:hover{
background-color: rgb(30, 228, 89);
}
.register .line{
display: inline-block;
width: 45px;
height: 7px;
background: #ddd;
margin-right: 4px;
}
.reguer{
text-decoration:underline;
cursor: pointer;
color: #fb7403;
}
.reguer:hover .nameregulation{
display: block;
}
/*姓名填写规则*/
.nameregulation{
font-size: 14px;
line-height: 28px;
width: 540px;
height: 250px;
border:1px solid #138fd1;
padding:0 10px;
color: #666;
position: absolute;
right: -126px;
top: 135px;
background: #fff;
display: none;
z-index: 9;
}
/*脚部*/
.foot{
width: 100%;
height: 100px;
background: #dcdcdc;
border-top: 2px solid rgb(36, 135, 201);
margin-top:100px;
}
.banquan{
padding-top:30px;
text-align: center;
color: #999;
}
.star{
color: #fb7403;
}0
收起
正在回答
1回答
同学你好， 首先，css选择器写的不对， 在html结构中，reguer和nameregulation是兄弟元素， 你这里写成了后代选择器， 然后， 由于HTML标签嵌套不规范， 导致浏览器解析的时候出现异常， 如下图所示， 浏览器解析后，姓名规则和提示信息既不是兄弟元素也不是后代关系
建议修改：（1）将外层p标签换成div标签包裹其他内容（2）修改为兄弟选择器
效果图：
最后， 建议： 同学其他部分的p标签也是div标签替换哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
相似问题
老师，请问如何实现子菜单移入不隐藏，移出又隐藏
0
2
4
光标离开内容分类，分类下的子菜单就自动隐藏了
21
1
4
显示与隐藏
0
0
4
为什么‘姓名填写规则’不会变化
18
0
1
老师，为什么我的代码只有衣物会显示隐藏列表
13
0
5
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星