css3提示文字彈窗代碼

1、css3提示文字彈窗代碼不需要額外的javascript代碼，你可以通過用法css3樣式來創(chuàng)建一個類似的效果。css代碼data-tips position: relative; text-decoration: none; data-tips:after, data-tips:before position: absolute; z-index: 100; opacity: 0; data-tips:after content: attr(data-tips); height: 25px; line-height: 25px; padding: 0 10px; font-size: 12px

2、; text-align: center; color: fff; background: 222; border-radius: 5px; text-shadow: 0 0 5px 000; -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3); box-shadow: 0 0 5px rgba(0,0,0,0.3); white-space: nowrap; -moz-box-sizing: border-box; -webkit-box-sizing: border-bo

3、x; box-sizing: border-box; data-tips:before content: "" width: 0; height: 0; border-width: 6px; border-style: solid; data-tips:hover:after, data-tips:hover:before opacity: 1; /* top tips */data-tips.top-tip:after,data-tips.top-tip:before -webkit-transition: bottom 0.25s ease-in-out

4、, opacity 0.25s ease-in-out; -moz-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out; transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out; bottom: 90%; left: -9999px; margin-bottom: 12px; data-tips.top-tip:before border-color: 222 transparent transparent transparent; margin-

5、bottom: 0; data-tips.top-tip:hover:after, data-tips.top-tip:hover:before bottom: 100%; left: 0; data-tips.top-tip:hover:before left: 15px; /* bottom tip */data-tips.bottom-tip:after,data-tips.bottom-tip:before -webkit-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out; -moz-transition: top

6、 0.25s ease-in-out, opacity 0.25s ease-in-out; transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out; top: 90%; left: -9999px; margin-top: 12px; data-tips.bottom-tip:before border-color: transparent transparent 222 transparent; margin-top: 0; data-tips.bottom-tip:hover:after, data-tips.bottom

7、-tip:hover:before top: 100%; left: 0; data-tips.bottom-tip:hover:before left: 15px; /* right tip */data-tips.right-tip:after,data-tips.right-tip:before -webkit-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out; -moz-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out; transitio

8、n: left 0.25s ease-in-out, opacity 0.25s ease-in-out; top: -9999px; left: 96%; margin-left: 12px; data-tips.right-tip:before border-color: transparent 222 transparent transparent; margin-left: 0; data-tips.right-tip:hover:after, data-tips.right-tip:hover:before left: 100%; top: 0; data-tips.right-ti

9、p:hover:before top: 7px; /* left tip */data-tips.left-tip:after,data-tips.left-tip:before -webkit-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out; -moz-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out; transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out; top: -9999px; right: 96%; margin-right: 12px; data-tips.left-tip:before border-color: transparent transparent transparent 222; margin-right: 0