html+css如何实现鼠标移入链接显示图片 |
您所在的位置：网站首页 › 超链接鼠标样式 › html+css如何实现鼠标移入链接显示图片 |
html+css如何实现鼠标移入链接显示图片
|
目录 一、代码准备 二、鼠标没移入的效果 三、鼠标移入的效果 四、总结 html+css如何实现鼠标移入链接显示某一个东西，这种案例对于大家伙儿来说是经常会用到的，小魏在这儿分享给大家 一、代码准备 Document .div1 span { display: none; width: 500px; height: 500px; background: url(images/a01.jpg) no-repeat center center; } .div1 a { cursor: pointer; } .div1 a:hover span { display: block; } 显示
二、鼠标没移入的效果
这里只有一个显示的链接
四、总结 这个里面用到的关键点是display:none/block； 设置为block可以将标签转为块级元素并且显示 设置为none可以将标签进行隐藏 |
【本文地址】
今日新闻 |
推荐新闻 |