鼠标经过提示纯css
html
<div class="inputEdit"> <div class="editTool"> <div class="item"> <span class="iconfont icon-biaoqing"></span> <div class="tips"> <div class="text">表情</div><div class="arrow"></div> </div> </div> <div class="item"> <span class="iconfont icon-tupian"></span> <div class="tips"> <div class="text">图片</div><div class="arrow"></div> </div> </div> <div class="item"> <span class="iconfont icon-gengduo"></span> <div class="tips"> <div class="text">更多</div><div class="arrow"></div> </div> </div> </div> </div>
css
.inputEdit .editTool{ display:flex; align-items:center; padding:5px; } .inputEdit .editTool .item { margin-right:12px; position:relative; cursor:pointer; } .inputEdit .editTool .item:hover .tips{ visibility:visible; opacity:1; bottom:100%; width:0px; } .inputEdit .editTool .item:hover .iconfont{ color:#666; } .inputEdit .editTool .item .tips{ position:absolute; bottom:102%; left:50%; width:0; display:flex; justify-content:center; align-items:center; flex-direction:column; visibility:hidden; -webkit-transition: all .1s ease;-moz-transition: all .1s ease;-o-transition: all .1s ease;transition: all .1s ease; opacity:0; z-index:999; } .inputEdit .editTool .item .text{ background:rgba(0,0,0,0.7); color:#fff; white-space: nowrap; overflow: auto; padding:5px 8px; border-radius:5px; font-size:12px; } .inputEdit .editTool .item .arrow{ display:block; width: 0; height: 0; border-top: 5px solid rgba(0,0,0,0.7); border-right: 5px solid transparent; border-left: 5px solid transparent; margin-bottom:3px; } .inputEdit .editTool .item .iconfont{ color:#9c9c9c; font-size:21px; }