html上实现鼠标悬停显示另一元素

最新推荐文章于 2024-05-04 15:31:42 发布

Skr-Eric

最新推荐文章于 2024-05-04 15:31:42 发布

阅读量3.8k

点赞数 1

文章标签：前端 html JS CSS 鼠标悬停

本文链接：https://blog.csdn.net/Skr_Eric/article/details/100042459

版权

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标悬停</title>
<style>
div{
clear:both;
margin:5px 0 0 0;
font-size:12px;
line-height:22px;
}
a.alt{
position:relative;
background-color:#fff;
float:left;
width:158px;height:20px;
margin:0 auto;
border:1px solid #eee;
text-align:center;
text-decoration:none;
color:#0066cc;
}
a.alt:hover{
background:#fff;
text-decoration:none;z-index:2;
}
a.alt span{
display:none;
}
a.alt:hover span{
position:absolute;
display:block;
top:-1px;left:158px;
width:130px;height:60px;
border:1px solid #eee;
z-index:1;
}
</style>
</head>
<body>
<div>
<a class='alt' href="/"><span>test1</span>test</a>
</div>
</body>
</html>

可以自行调试修改

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Skr-Eric

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html上实现鼠标悬停显示另一元素

html代码：<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>鼠标悬停</title><style>div{clear...
复制链接

扫一扫