纯css实现滑过时展示所有内容的效果

https://chokcoco.github.io/magicCss/html/index.html

.hover-title{ position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); width:120px; line-height:38px; color:#333; text-align:center; font-size:24px; cursor:pointer; } .hover-title:hover::before{ content:attr(data-msg); position:absolute; top:-50px; left:10px; padding:2px 6px; display:inline-block; color:#333; border:1px solid #333; border-radius:5px; font-size:14px; } .hover-title:hover::after{ content:""; border-top:5px solid #333; border-left:5px solid transparent; border-right:5px solid transparent; position:absolute; top:-6px; left:55px; }

 

<hgroup class="hover-title" data-msg="类title框展示">
Hover ME
</hgroup>