JSFiddle - React, Tailwind, and code Playground

by yao3060

HTML

<a class='info' href="http://www.domain.net">http://www.domain.net<span>css-特效展示，有实例参考哦-我们学习网欢迎大家来学习< /span></a>

<a class='info' href="http://www.domain.net">www.domain.net<span>我们学习网欢迎大家来学习</span></a>

<a class='info' href="http://www.domain.net">www.domain.net<span>我们学习网欢迎大家来学习</span></a>

<a class='info' href="http://www.domain.net">www.domain.net<span>我们学习网欢迎大家来学习</span></a>

<a class='info' href="http://www.domain.net">www.domain.net<span>我们学习网欢迎大家来学习</span></a>

CSS

.info {position:relative;background:#fff;color:#666; text-decoration:none;font-size:12px;width:150px;text-align:center;border:1px solid #ccc; padding:8px 10px;}

.info:hover {background:#eee;color:#333;}

.info span {display: none }

.info:hover span {display:block;position:absolute;top:30px;left:60px;width:130px;

border:1px solid #ff0000; background:#fff; color:#000;padding:5px;text-align:left;}