当前位置 CSS模版园 >> 酷炫特效 >> 纯CSS伪元素after实现自定义hover效果

原创纯CSS伪元素after实现自定义hover效果

纯CSS伪元素after实现自定义hover效果

我们知道,当鼠标悬停在图片或者文字上的时候,会有一行文字说明悬停显示出来 这行文字都是默认的效果,忽然有一天:

“咳咳~  小蒋啊,你这个提示不太美观,美化一下!”;

“好的,老板,没问题,老板!”

思考了下,用div+js实现吧~ 哈哈,现在你还在用div定位?out了吧,赶快使用css伪元素after来实现吧!!!

CSS:

span {border-bottom: 1px dotted #333;position: relative;cursor: pointer;}
span:hover::after {content: attr(desc);position: absolute;left:30px;top:20px;white-space: nowrap;background: #690;padding: 3px 6px;color: #FFF;border-radius: 3px;}

html

<span desc="上天呀!">上邪</span>

声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-13-44.html

推荐模版

热门网站模版

猜您喜欢

热门网站模版

热门网站模版

评论

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)