场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏

常见属性：

visibility： hidden
display： none
区别：
visibility： hidden 隐藏元素本身，并且在网页中占位置
display： none 隐藏元素本身，并且在网页中不占位置

注意点：
开发中经常会通过 display属性完成元素的显示隐藏切换
display： none；（隐藏）、 display： block；（显示）

重点代码

 .code {position: absolute;left: 50%;top: 41px;/*隐藏图片*/display: none;transform: translate(-50%);}/* 鼠标悬停a 显示二维码图片 */.nav li a:hover img {display: block;}

完整代码


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}/* 因为有通栏：占满一行的边框，所以需要有一个通栏：占满一行的盒子 */.nav {height: 40px;border-bottom: 1px solid #ccc;}/* 因为ul中所有的内容都是在网页的宽度固定并且水平居中的盒子内部，所以设置ul为宽度固定并且水平居中的效果（后面项目中所用到的版心） */ul {list-style: none;width: 1200px;margin: 0 auto;}ul li {float: left;width: 20%;height: 40px;border-right: 1px solid #ccc;/* 自动内减 */box-sizing: border-box;text-align: center;line-height: 40px;}ul .last {border-right: none;}ul li a {/* a标签默认是行内元素，宽高由内容撑开，并且无法设置宽高，此时默认情况用户只能点击文字区域才能调整 *//* 如果把a标签转换成块级元素，此时可以设置宽高，会让a标签范围更大，用户可以点击调整的区域也越大 */display: block;/* 宽度不设置块元素会默认占满一行 */height: 40px;text-decoration: none;color: #000;}ul li .app {position: relative;}.code {position: absolute;left: 50%;top: 41px;display: none;transform: translate(-50%);}/* 鼠标悬停a 显示二维码图片 */.nav li a:hover img {display: block;}</style>
</head>
<body><!-- 导航 --><div class="nav"><ul><li><a href="#">我要投资</a></li><li><a href="#">平台介绍</a></li><li><a href="#">新手专区</a></li><!-- 因为用户鼠标放在二维码图片上也能跳转，所以证明img也是在a的范围内，因此把img写在a标签的内部 --><li><a href="#" class="app">手机微金所 <img src="./images/code.jpg" alt="" class="code"> </a></li><li class="last"><a href="#">个人中心</a></li></ul></div></body>
</html>

显示效果

鼠标悬停时显示图片，不悬停时，隐藏图片相关推荐

CSS文字超出部分用省略号代替，js鼠标悬停时显示全部文本
需求: 宽度为百分比,随浏览器变化而变化,当窗口变小到一定程度,文字超出部分用省略号代替,当文字出现省略号,需要鼠标悬停时显示全部文本. 文字超出部分用省略号代替 width:overflow: hi ...
js,jq表格/文本内容溢出，用三个点替代，鼠标悬停时显示全部内容
项目中遇到如果表格内容太多的话页面会很丑,所以想到给表格一个最大宽度之类的,当内容超出时用三个点代替超出的部分,当鼠标悬停时显示全部的信息,下面百度到两个案例,都可以实现: 1.在表格下面在添加一模一 ...
java 鼠标悬停显示文字_IntelliJ在鼠标悬停时显示JavaDocs工具提示
对于IntelliJ 13,IDE设置的编辑器页面中有一个复选框在此处输入图片说明编辑:对于IntelliJ 14,该选项已移至"编辑器">"常规"页 ...
idea鼠标提示没有了_IntelliJ在鼠标悬停时显示JavaDocs工具提示
对于IntelliJ 13,IDE设置的编辑器页面中有一个复选框在此处输入图片说明编辑:对于IntelliJ 14,该选项已移至"编辑器">"常规"页 ...
HTML鼠标悬停显示隐藏div,javascript – 在鼠标悬停时显示/隐藏DIV
[reedit基于评论] jsfiddle修订,删除了css-only解决方案.诀窍是监视滑动元素的悬停状态并使用超时允许用户在滑动元素上移动(另请参阅更新的jsfiddle中的注释). 来自OPs ...
在div 鼠标悬停时改变滚定条样式
通过改变滚动条颜色来实现div 鼠标悬停时显示滚动条小方块 .panel-cont::-webkit-scrollbar {/*滚动条整体样式*/width: 6px; /*高宽分别对应横竖滚动条的 ...
基于jQuery的鼠标悬停时放大图片的效果制作
这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...
html5鼠标悬停图片放大的原理,jQuery当鼠标悬停时放大图片的效果实例
这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果.今天就把制作该效果的经验与大家一同分享.先看看最终效果演示: HT ...
利用伪元素给图片在鼠标悬停时添加背景图片
利用伪元素给图片在鼠标悬停的时候添加背景图片,这种效果在电影网站上使用的比较频繁,主要是鼠标悬停的时候显示出播放的图标,点击图片链接后就会进入视频详情页面,而使用伪元素是为了使我们的html代码更加简 ...

鼠标悬停时显示图片，不悬停时，隐藏图片

场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏

重点代码

完整代码

显示效果

鼠标悬停时显示图片，不悬停时，隐藏图片相关推荐

最新文章

热门文章