How to implement custom link prompts with CSS:
In the default state, you can use the title attribute of the tag to achieve the link prompt effect. For example:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title></head><body><a href="http://www.51texiao.cn" title="蚂蚁部落">蚂蚁部落</a></body></html>
Although the above code can achieve the link prompt effect, it often cannot meet actual needs. You may need to customize links that are more beautiful or match the page. Prompt effect.
The code examples are as follows:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">ul { list-style: none; font-size: 14px;}li { width: 100px; height: 30px; line-height: 30px; float: left; text-align: center; position: relative; border: 1px solid red;}span { display: none;}a:link, a:visited { text-decoration: none;}a:hover .tishi { display: block; width: 100px; height: 30px; background-color: #6C9; line-height: 30px; text-align: center; position: absolute; left: 80px; top: 40px; color: #FFFFFF;}</style></head><body><ul> <li> <a href="#" class="mylink">DIV+CSS<span class="tishi">DIV+CSS</span></a> </li> <li> <a href="#" class="mylink">jQuery<span class="tishi">jQuery</span></a> </li> <li> <a href="#" class="mylink">JS<span class="tishi">JS</span></a> </li> <li> <a href="#" class="mylink">HTML<span class="tishi">HTML</span></a> </li> <div style="clear:both"></div></ul></body></html>The above code successfully achieves the effect we want. The most important method is to use the hyperlink pseudo-class to display span elements.
The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0508/943.html
The most original address is: http://www.softwhy.com/ forum.php?mod=viewthread&tid=4689
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
