关于脚本要求的内容
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
header{
height: 128px;
min-width: 1200px;
background-color: #efefef;
overflow: hidden;
}
.top-left{
width: 400px;
height: 128px;
float: left;
margin-left: 290px;
}
.top-left a{
height: 105px;
width: 100px;
}
.top-right{
float: right;
width: 635px;
height: 28px;
font-family: Microsoft YaHei;
}
.word{
height: 26px;
width: 200px;
font-size: 18px;
line-height: 26px;
float: left;
margin-top: 51px;
letter-spacing: 1pt;
font-family: Microsoft YaHei;
display: inline-block;
}
.tiao{
width:3px;
height: 32px;
background-color: black;
display: inline-block;
float: left;
margin-top: 48px;
}
.word1{
height: 16px;
width: 68px;
font-size: 12px;
color: #666666;
display: inline-block;
float: left;
margin-top: 56px;
margin-left: 5px;
}
.word2{
font-size: 12px;
float: left;
width: 155px;
height: 20px;
font-size: 13px;
margin-top: 54px;
font-family: Microsoft YaHei;
}
.word2 span{
color: #f97403;
font-size: 13px;
display: inline-block;
padding-left: 5px;
}
.word3{
float: left;
width: 135px;
height: 22px;
font-size: 13px;
margin-top: 53px;
line-height: 22px;
margin-left: 5px;
}
.word3 span{
color: #f97403;
display: inline-block;
padding:0px 5px;
}
.word4{
float: left;
width: 200px;
height: 400px;
font-size: 13px;
margin-top: 56px;
line-height: 16px;
z-index: 9;
}
.top-right a:last-child{
text-decoration: none;
font-size: 13px;
color: black;
margin-top: 51.5px;
display: inline-block;
width: 90px;
height: 25px;
line-height: 25px;
}
.jian{
height: 0;
width: 0;
border-right: 8px solid transparent;
border-top: 8px solid black;
border-left: 8px solid transparent;
float: right;
margin-top: 3px;
}
.blue1{
height: 2px;
min-width:1200px;
background-color: #2487c9;
z-index: 3;
}
.body{
min-width: 1200px;
height: 800px;
z-index: 3;
}
.head1{
width: 240px;
height: 20px;
margin-left:290px;
margin-top: 10px;
margin-bottom: 10px;
}
.head1 span{
color: #666666;
display: inline-block;
padding-left: 5px;
}
.zhang{
width: 950px;
height:40px;
background-color: #fb7403;
color: white;
line-height: 40px;
border-radius: 10px;
text-indent: 18px;
}
.nei{
width: 950px;
height: 630px;
margin-left:290px;
border:1px solid #fb7403;
border-radius: 10px;
}
.yinc{
display: none;
}
.ui-menu-item-department:hover .yinc{
display: block;
}
</style>
</head>
<body>
<header>
<div class="top-left">
<a href=""><img src="./素材/logo.png"></a>
<p class="word">慕课高铁客户服务中心</p>
<div class="tiao"> </div>
<p class="word1">客户服务</p>
</div>
<div class="top-right">
<p class="word2">意见反馈 <span>immooc@com</span></p>
<p class="word3">您好，请<span>登录</span>| 注册</p>
<div class="word4">
<a class="ui-menu-item-department">我的IMOOC</a>
<div class="jian"></div>
<div class="yinc">
<a href="">未完成订单</a>
<a href="">已完成订单(改/退)</a>
<a href="">我的保险</a>
<a href="">查看个人信息</a>
<a href="">账户安全</a>
<a href="">常用联系人</a>
<a href="">重点旅客预约</a>
<a href="">遗失物品查找</a>
<a href="">服务查询</a>
<a href="">投诉</a>
<a href="">建议</a>
</div>
</div>
<a href=""><img src="./素材/未标题-1.png">手机版</a>
</div>
</header>
<div class="blue1"></div>
<div class="body">
<div class="head1">
<p>您现在的位置:<span>客运首页 > 注册</span></p>
</div>
<div class="nei">
<div class="zhang">账户信息</div>
<div class="biao">
</div>
</div>
</div>
</body>
</html>
老师，您好，关于项目作业中的脚本要求有一些问题不知道如何用代码去实现，当鼠标划过右边侧选择项中的内容，其中为“我的IMOOC”字样的时候，会跳出预览框：1.这个应该是可以用css样式来实现的吧？首先将文本框display:none;设置为none属性，然后当.xxx:hover .xxxx{display:block;}，我按照上述方法试了一下，好像是不行？(我是参照后面的一个项目作业：城市看病医院网页，里面也有类似的内容) ，为什么我的是不可以的呢？ 2.未完成订单等所显示的文本框，涉及到上下两个独立的div容器，上面的div容器为header，下面的div容器为body，我将body的z-index:5; 上面的文本框属性z-index:9;为什么还是被body里面的内容遮盖住了呢？如何将订单所在的文本框至于最高层显示出来呢？
正在回答
同学你好，下图所示中的要求，就是鼠标移入“我的IMOOC”区域时，显示下拉框（也就是yinc元素）就可以了。
同学参考老师第一次回复中的建议修改，下拉列表的样式，同学自己在调整下就可以了，不用将“我的IMOOC”设置为文本框的父类样式了。
同学完成左右后，可以提交作业，批作业的老师会正对同学的完整项目给出详细的修改建议，并整理成文档发送给同学，方便同学查看与修改。
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星