How to customize more beautiful link prompt effect with CSS

Suggestion: Handwriting code as much as possible can effectively improve learning efficiency and depth.
By default, you can use the title attribute of the <a> tag to achieve a link prompt effect. For example

Copy code

The code is as follows:

Although the above code can achieve the link prompt effect, it often cannot meet the actual needs. You may need to customize the link prompt effect that is more beautiful or matches the page. The code example is as follows

Copy code

The code is as follows:

View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>Ant Tribe</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 main method is to use the hyperlink pseudo-class to display the span element

<<: Implement a simple search engine based on MySQL

>>: idea uses docker plug-in to achieve one-click automated deployment

Analysis of the implementation method of Nginx and Apache coexistence under Linux server

How to customize more beautiful link prompt effect with CSS

Analysis of the implementation method of Nginx and Apache coexistence under Linux server

How to perfectly implement the grid layout with intervals on the page

Getting Started Tutorial for Newbies ⑤: Website Registration is Very Easy, Quick Registration Tips

How to fix the width of table in ie8 and chrome

Docker deployment and installation steps for Jenkins

JS ES new feature of variable decoupling assignment

Detailed explanation of JavaScript axios installation and packaging case

Detailed explanation of Vuex environment

How to find and delete duplicate records in MySQL

Mysql Sql statement exercises (50 questions)

Recommend

How to create, start, and stop a Docker container

Mysql: The user specified as a definer ('xxx@'%') does not exist solution

MySQL deduplication methods

An article to solve the echarts map carousel highlight

Some tips for using less in Vue projects

How to connect SpringBoot to MySQL to get data and write to the backend interface

WeChat Mini Program User Authorization Best Practices Guide

Mysql master/slave database synchronization configuration and common errors

Detailed explanation of the idea of implementing password display and hiding function in Vue

Detailed explanation of configuring Docker's yum source and installing it in CentOS7

Best Practices Guide for MySQL Partitioned Tables

Detailed tutorial on installing PHP and Nginx on Centos7

HTML dl, dt, dd tags to create a table vs. Table creation table

Centos7 installation of Nginx integrated Lua sample code

Zabbix WEB monitoring implementation process diagram