鼠标移入显示图片案例

最新推荐文章于 2024-04-25 15:57:52 发布

夏木炎

最新推荐文章于 2024-04-25 15:57:52 发布

阅读量5k

点赞数 2

分类专栏：前端文章标签：鼠标移入显示

本文链接：https://blog.csdn.net/xm393392625/article/details/82656302

版权

前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

一.需要的效果

1）.未移入前

2）.鼠标移入后

3）.鼠标移出

二.实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		a {
			position: relative;
		}
		a img{
			display: none;
			position:absolute;
			left: 50%;
			margin-left: -60px;
			margin-top: -2px;
		}
		a:hover img{
			display: block;
		}
	</style>
	<body>
		<a href="" class="text-muted">
    		<span>宠物之家</span><br />
    		<img src="img/pet_04.jpg"  alt="宠物之家" width="130px"/>
    	</a>
	</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

夏木炎

关注关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
鼠标移入显示图片案例

一.需要的效果1）.未移入前2）.鼠标移入后3）.鼠标移出二.实现代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;styl
复制链接

扫一扫