代码如下:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
table{
background-color: cadetblue;
height: 150px;
width: 300px;
}
th,td{
border: 1px solid;
text-align: center;
}
.test{
position: relative;
}
.test:before{
content: "1314"; /*如果不给数据就是清空伪元素内容*/
position: absolute; /*设置为绝对定位*/
opacity: 0; /*初始透明度为0 ,注意:如果是非0就会一直悬浮,如果是0的话,鼠标放上去悬浮*/
background-color: rebeccapurple; /*设置背景颜色*/
color: #d5d5e1; /*设置文字颜色*/
transform: translateY(-10px); /*向上移动10像素*/
transition: all 0.2s ease-in-out; /*设置过渡效果*/
padding: 10px; /*设置内边距*/
top: -50%; /*将其移出父容器*/
/* left: 0; 在左侧 */
right: -25px; /*在右侧*/
/* width: 100%; 与父容器同宽 */
width: 20px;
height: 10px;
}
.test:hover:before{
opacity: 10; /*鼠标悬浮时透明度为1*/
transform: translateY(0); /*移动位置为0*/
}
style>
head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名th>
<th>年龄th>
<th>性别th>
<th>粉丝th>
tr>
thead>
<tbody>
<tr>
<td>
<div>
小李
div>
td>
<td>20td>
<td>男td>
<td>
天津粉丝
<span class="test">span>
td>
tr>
<tr>
<td>
<div>
小李
div>
td>
<td>28td>
<td>女td>
<td>全国粉丝td>
tr>
<tr>
<td>小赵td>
<td>31td>
<td>男td>
<td>北京粉丝td>
tr>
tbody>
table>
body>
html>
参考地址:
css如何设置悬浮文字.
核心代码如下:
```html
.my_hover_number {
width: 40px;
height: 20px;
display: inline-block;
/* background: url(/zh_CN/htmledition/images/newicon/mail4788ca.png) -112px -192px no-repeat; */
background-color: blueviolet;
margin-left: 1px;
vertical-align: top;
position: relative;
top: -10px;
}
```
整个网页代码如下:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
table{
background-color: cadetblue;
height: 150px;
width: 300px;
}
th,td{
border: 1px solid;
text-align: center;
}
.my_hover_number {
width: 40px;
height: 20px;
display: inline-block;
/* background: url(/zh_CN/htmledition/images/newicon/mail4788ca.png) -112px -192px no-repeat; */
background-color: blueviolet;
margin-left: 1px;
vertical-align: top;
position: relative;
top: -10px;
}
style>
head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名th>
<th>年龄th>
<th>性别th>
<th>粉丝th>
tr>
thead>
<tbody>
<tr>
<td>
<div>
小李
div>
td>
<td>20td>
<td>男td>
<td>
天津粉丝
<span class="my_hover_number">350span>
td>
tr>
<tr>
<td>
<div>
小李
div>
td>
<td>28td>
<td>女td>
<td>全国粉丝td>
tr>
<tr>
<td>小赵td>
<td>31td>
<td>男td>
<td>北京粉丝td>
tr>
tbody>
table>
body>
html>
代码如下:
.jiu_jiu{
box-sizing: border-box;
margin: 0px;
min-width: 0px;
color: rgb(255, 255, 255);
background-color: rgb(241, 64, 60);
padding-left: 4px;
padding-right: 4px;
position: relative;
/* bottom: 65%; */
/* left: 42%; */
top: -60%;
width: 30%;
left: 70%;
font-size: 11px;
border-radius: 20px;
border: 2px solid rgb(255, 255, 255);
transform: scale(0.8);
}
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
table{
background-color: cadetblue;
height: 150px;
width: 300px;
}
th,td{
border: 1px solid;
text-align: center;
}
.my_hover_number {
width: 40px;
height: 20px;
display: inline-block;
/* background: url(/zh_CN/htmledition/images/newicon/mail4788ca.png) -112px -192px no-repeat; */
background-color: blueviolet;
margin-left: 1px;
vertical-align: top;
position: relative;
top: -10px;
}
.jiu_jiu{
box-sizing: border-box;
margin: 0px;
min-width: 0px;
color: rgb(255, 255, 255);
background-color: rgb(241, 64, 60);
padding-left: 4px;
padding-right: 4px;
position: relative;
/* bottom: 65%; */
/* left: 42%; */
top: -60%;
width: 30%;
left: 70%;
font-size: 11px;
border-radius: 20px;
border: 2px solid rgb(255, 255, 255);
transform: scale(0.8);
}
style>
head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名th>
<th>年龄th>
<th>性别th>
<th>粉丝th>
tr>
thead>
<tbody>
<tr>
<td>
<div>
小李
div>
td>
<td>20td>
<td>男td>
<td>
天津粉丝
<span class="my_hover_number">350span>
td>
tr>
<tr>
<td>
<div>
小李
div>
td>
<td>28td>
<td>女td>
<td>
全国粉丝
<div class="jiu_jiu">999+div>
td>
tr>
<tr>
<td>小赵td>
<td>31td>
<td>男td>
<td>北京粉丝td>
tr>
tbody>
table>
body>
html>
好了就这样吧,方式都差不多,多看看别的网站而已!