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

Detailed explanation of how to migrate a MySQL database to another machine

How to customize more beautiful link prompt effect with CSS

Detailed explanation of how to migrate a MySQL database to another machine

Detailed explanation of how Vue returns values to dynamically generate forms and submit data

The difference and introduction of ARGB, RGB and RGBA

What you need to know about responsive design

Winows Server 2019 Activation Code & Volume License Edition KMS Installation Key GVLK

Implementing carousel with native JavaScript

Mysql5.7.17 winx64.zip decompression version installation and configuration graphic tutorial

Ideas and methods for incremental backup of MySQL database

40 web page designs with super large fonts

202 Free High Quality XHTML Templates (2)

Recommend

MySQL 5.7.17 and workbench installation and configuration graphic tutorial

Problems and experiences encountered in web development

Analyze several common solutions to MySQL exceptions

Example code for drawing double arrows in CSS common styles

Four data type judgment methods in JS

Detailed explanation of the use of the MySQL parameter sql_safe_updates in the production environment

Steps for Docker to build a private warehouse Harbor

Ubuntu 18.04 one-click upgrade of all third-party Python packages and installation of Python packages

How to keep running after exiting Docker container

Comparison of the advantages of vue3 and vue2

Flex layout makes adaptive pages (syntax and examples)

A practical record of troubleshooting a surge in Redis connections in Docker

Example of how to enable Brotli compression algorithm for Nginx

Ubuntu 20.04 desktop installation and root permission activation and ssh installation details

Learning Vue instructions