现在才明白hover悬浮时,显示元素的用法:hover表示状态,那.location:hover .city-list连起来写的意思就是选择类名是location的元素,并且这个元素正在处于鼠标悬浮状态 的 后代 且类名是city-list的元素,将这个元素的display改成block。
.location .city-list{
display: none;
}
/* 当鼠标移入到location时,让city-list显示 */
.location:hover .city-list{
display: block;
}
案例
案例里面有几个问题,当鼠标移入到北京时,它的周围要出现边框,做法是可以先设置一个transparent的边框,当hover的时候,改变透明颜色成灰色,这样这个字就不会有细微的动来动去的感觉了。
还有就是注意这个padding不要添加到hover里面。
定位的问题,使用子绝父相,设置z-index,把下面的边框给遮盖掉。
最重要的是弄明白了hover鼠标悬浮显示隐藏元素原来是这个意思
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./fa/css/all.css">
<style>
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
body {
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
}
.top-bar-wrapper {
width: 100%;
line-height: 30px;
height: 30px;
background-color: #E3E4E5;
border-bottom: 1px solid rgb(219, 219, 219);
/* overflow:hidden; */
}
.top-bar {
width: 1190px;
margin: 0 auto;
}
.top-bar a,
.top-bar span,
.top-bar i {
color: #999;
text-decoration: none;
}
.top-bar a:hover,
.top-bar .highlight {
color: #f10215;
}
.location {
float: left;
position: relative;
}
.location .fas {
color: red;
}
.current-city {
padding: 0 10px;
border: 1px solid transparent;
border-bottom: none;
position: relative;
z-index: 10;
}
.location:hover .current-city {
border: 1px solid #ccc;
border-bottom: none;
background-color: #fff;
}
.location:hover .city-list {
display:block;
}
.location .city-list {
display: none;
width: 320px;
height: 426px;
background-color: #fff;
position: absolute;
top: 30px;
left: 0;
border:1px solid rgb(219, 219, 219);
box-shadow: 0 2px 2px rgba(201, 201, 201, 0.2);
}
.shortcut {
float:right;
}
.shortcut .line {
width: 1px;
height: 10px;
background-color: rgb(204, 202, 202);
margin: 10px 8px 0;
}
.shortcut li {
float: left;
}
</style>
</head>
<body>
<div class="top-bar-wrapper">
<div class="top-bar">
<div class="location">
<div class="current-city">
<i class="fas fa-map-marker-alt"></i>
<a href="#">北京</a>
</div>
<div class="city-list">
</div>
</div>
<ul class="shortcut clearfix">
<li>
<a href="#">你好,请登录</a>
<a class="highlight" href="#">免费注册</a></a>
</li>
<li class="line"></li>
<li>
<a href="#">我的订单</a>
</li>
<li class="line"></li>
<li>
<a href="#">我的京东</a>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li>
<a href="#">京东会员</a>
</li>
<li class="line"></li>
<li>
<a class="highlight" href="#">企业采购</a>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li>
<a href="#">客户服务</a>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li>
<a href="#">网站导航</a>
</li>
<li class="line"></li>
<li>
<a href="#">手机京东</a>
</li>
</ul>
</div>
</div>
</body>
</html>