Home >Web Front-end >HTML Tutorial >How to implement custom link tips in CSS_html/css_WEB-ITnose
How to implement custom link tips in CSS_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:591049browse
How to implement custom link prompts with CSS:
In the default state, you can use the title attribute of the 3499910bf9dac5ae3c52d5ede7383485 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