Hover over hyperlink to pop up a popup box:
You know that the hyperlink has a title property, when the mouse is placed in the link, you can appear a prompt box effect, but the effect is cheap but often not beautiful, so you need to customize a, the following is a pure CSS implementation of this effect, and we share a bit.
The code example is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Mouse hover over hyperlink pop-up alert box-ant tribe</title><styletype= "Text/css">Body{font-size:12px;}. Tip{Color:Red;text-decoration:None;position:relative;}. Tip span{Display:None;}. Tip:hover{cursor:Hand;}. Tip:hover. PopBox{Display:Block;position:Absolute;Top:15px; Left:-30px;width:100px;Background-color:#424242;Color:#fff;padding:10px;}</style></Head><Body>Ant Tribe welcomes you, click<ahref="#"class= "Tip">Link<spanclass= "PopBox">Ant Tribe provides basic examples of tutorials</span></a></Body></HTML>
The principle of implementation is very simple, here is the use of absolute positioning, as long as the master of this principle, then there is no difficulty.
CSS absolute positioning can be found in the absolute positioning of CSS section.
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=9270
Mouse hover over hyperlink pop-up Prompt box
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
