.bar {
background-color: #e3e4e5;
color: #888;
padding-left: 40px;
}
.summary {
display: inline-block;
padding: 5px 28px;
text-indent: -15px;
user-select: none;
/*none:
文本不能被选择
text:
可以选择文本
all:
当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
element:
可以选择文本,但选择范围受元素边界的约束*/
outline: 0;
position: relative;
z-index: 1;
}
.summary::after {
content: '';
position: absolute;
width: 12px; height: 12px;
margin: 4px 0 0 .5ch;
background: url(./arrow-on.svg) no-repeat;
background-size: 100% 100%;
transition: transform .2s;
}
.details:focus-within .summary,
.summary:hover {
/*当元素本身或其后代获得焦点时,:focus-within伪类的元素就会有效。*/
background-color:
#fff
;
box-shadow:
inset
1px
0
#ddd
, inset
-1px
0
#ddd
;
}
.details
:focus-within
.summary
:
:after
{
transform:
rotate(180deg);
}
.box
{
display:
none;
position:
absolute;
border:
1px
solid
#ddd
;
background-color:
#fff
;
}
.details
:focus-within
.box
{
display:
block;
}
html:
<div class="bar">
<div class="details">
<a href="javascript:" class="summary">我的消息</a>
<div class="box">
<a href="javascript:">我的回答<sup>12</sup></a>
<a href="javascript:">我的私信</a>
<a href="javascript:">未评价订单<sup>2</sup></a>
<a href="javascript:">我的关注</a>
</div>
</div>
</div>
<p>这里放一段文字表明上面的是悬浮效果。</p>