CSS快速入门-鼠标悬浮(hover伪类)
一、概述
hover伪类：在鼠标移到元素上时向此元素添加特殊的样式。比较普通的就是一个url，当你鼠标放上去后，会变颜色。
在现实的应用场景也非常之多。最常见的是网站的悬浮导航，当鼠标放到导航条上时，会出现颜色变化或者元素自动伸出菜单栏。
实例1：鼠标hover时，将内容框起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.ele:hover {
border:1px solid red;
}
.ele { #去掉边框闪烁问题。（因为边框1像素会导致闪烁，所以先用1px透明色占住位置，hover时再让其变红，就不会觉得有闪烁了）
border:1px solid transparent;
}
</style>
</head>
<body>
<div class="ele">
<div>222</div>
<div class="ele-item">111</div>
</div>
</body>
</html>
原始效果：
鼠标悬停后：
实例2：尾品会vdangdang.com首页最下面有这样的图片
原始网页：
鼠标悬停后效果：
其实这个主要就是用hover制作而成。下面说一下具体实现：
实现思路：
1、新建一个div1
2、新建一个div2，把底部图片放入div2
3、再新建一个div3，悬浮内容放入div3
HTML代码：
<div class="touch">
<div><img src="3.png"></div>
<div class="content">
<p><h5>品牌故事</h5></p>
<p><h6>我们的源泉不是时尚，不是潮流，而是由心而发的喜爱，将精致华丽的艺术融入东方式的低调，都只为了一个人而存在。</h6></p>
<input class="inpt" type="text" name="tel" id="tel"/>
<button class="btn">开售提醒</button>
</div>
</div>
CSS代码：
1、定义div1高度和宽度，class为touch，overflow设置为hidden，图片超过定义的高度和宽度会隐藏。
.touch {
height:200px;
width:400px;
overflow:hidden;
position:relative;
}
2、div2为content，内容必须填满div1，所以设置上下左右都为0.且设置字体大小、颜色、对齐方式。
首先设置div2为不可见，即在鼠标hover之前内容默认是隐藏的，当鼠标悬浮后，再放出来。
.touch .content {
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
font-size:20px;
background-color:black;
color:white;
text-align:center;
visibility:hidden;
}
3、设置鼠标悬浮时样式。内容放出来，且设置背景图片透明度为0.5，可以被看到。
.touch:hover .content{
visibility:visible;
border:4px solid red;
background-color:rgba(0,0,0,0.5)
}
4、最后设置input框和button
.touch .content .btn{
background-color:#e83375;
color:white;
cursor: pointer;
border: none;
width: 70px;
height: 22px;
}
.touch .content .inpt{
height: 18px;
border: none
line-height: 18px;
font-size: 12px;
}
整体html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.touch {
height:200px;
width:400px;
overflow:hidden;
position:relative;
}
.touch .content {
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
font-size:20px;
background-color:black;
color:white;
text-align:center;
visibility:hidden;
} .touch:hover .content{
visibility:visible;
border:4px solid red;
background-color:rgba(0,0,0,0.5)
}
.touch .content .btn{
background-color:#e83375;
color:white;
cursor: pointer;
border: none;
width: 70px;
height: 22px;
}
.touch .content .inpt{
height: 18px;
border: none
line-height: 18px;
font-size: 12px;
} </style>
</head>
<body>
<div class="touch">
<div><img src="3.png"></div>
<div class="content">
<p><h5>品牌故事</h5></p>
<p><h6>我们的源泉不是时尚，不是潮流，而是由心而发的喜爱，将精致华丽的艺术融入东方式的低调，都只为了一个人而存在。 </h6></p>
<input class="inpt" type="text" name="tel" value="请输入手机号码或邮箱地址" id="tel"/>
<button class="btn">开售提醒</button>
</div>
</div>
</body>
</html>
关键知识点：
1、最外面的div设置成relative，把content设置absolute，然后top、bottom、left、right设置均为0，即把content铺满div；
2、visibility:hidden；默认隐藏最上面的内容；
3、visibility:visible和background-color:rgba(0,0,0,0.5)，hover时放出内容，并且设置背景透明度，可以看到背景图片；
CSS快速入门-鼠标悬浮(hover伪类)的更多相关文章
- CSS :hover伪类选择定义和用法
伪类选择符E:hover的定义和用法: 设置元素在其鼠标悬停时的样式.E元素可以通过其他选择器进行选择,比如使用类选择符.id选择符.类型选择符等等.特别说明:IE6并非不支持此选择符,但能够支持a元 ...
- 利用CSS hover伪类改变其他元素的总结
:hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮 ...
- 【笔记】css hover 伪类控制其他元素
最近在模仿一个网站的项目 当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的 但是这有一个要求 就是添加hov ...
- CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别
css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...
- css hover伪类选择器与JQuery hover()方法
css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...
- 理解是最好的记忆方法 之 CSS中a链接的④个伪类为何有顺序
理解是最好的记忆方法 之 CSS中a链接的④个伪类为何有顺序 在CSS中,a标签有4种伪类,分别为: a:link, a:visited, a:hover, a:active 对其稍有了解的前端er都 ...
- 用:hover伪类代替js的hover事件
制作二级菜单要实现鼠标移动上去显示子菜单,鼠标移出子菜单隐藏,或者其他类似需求的地方,首先我会想到用jquery的hover事件来实现,如: $(".nav").hover(fun ...
- CSS快速入门（四）
目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...
- CSS快速入门-属性和伪类
一.属性选择器 <div class="gradefather"> hello1 <div name="son">hello2 < ...
随机推荐
- wxpython 窗口排版- proportion/flag/border参数说明
新学习wxpython,一直纠结于窗口控件的排版,经过几天的查资料.试验,总结如下. 1.需求实例 来个实例,窗口有3行控件 第一行是文本提示(大小不变,文字左对齐,控件居左). 第二行依次为文本提示 ...
- Linux which/whereis/locate命令详解
which 查看可执行文件的位置,从全局环境变量PATH里面查找对应的路径,默认是找 bash内所规范的目录 whereis 查看文件的位置,配合参数-b,用于程序名的搜索,从linux数据库查找. ...
- symfony学习笔记2—纯的PHP代码和symfony的区别
Symfony vs 纯PHP为啥symfony比普通的php文件访问要好?这一章我们写一个简单的php文件项目,然后组织它,你会发现为什么web应用会发展到现在这个样子.最后我们将学习symfony ...
- .NET Core 控制台项目中的Nuget打包类库及引用
由于使用的是MAC版本的VSCode,所以全部是通过dotnet命令来完成的. 1.dotnet new lib 创建类库项目: 2.编辑项目根目录下的.csproj文件,添加版本号(建议): < ...
- Anaconda 包管理工具 conda 进行虚拟环境管理入门
在基于 python 进行数据分析.机器学习等领域的实践和学习时,由于代码的更迭和更新,运行他人实现的代码或尝试安装新的工具库时往往需要指定特定版本的其他工具库,以满足特定环境的构建条件.而将同一工具 ...
- libextobjc 实现的 defer
算法沉思录:分而治之(复用): 分而治之是指把大而复杂的问题分解成若干个简单的小问题,然后逐个解决.这种朴素的思想来源于人们生活与工作的经验,也完全适合于技术领域. 要崩溃的节奏: 要崩溃的节奏: V ...
- 问题：win10防火墙不能自动启动
问题:win10防火墙不能自动启动 描述:Windows防火墙不能自动启动,每次开机要手动启动,打开service.msc,里面防火墙的启动类型为手动,按钮为灰色,不能更改为自动,怎么办? 解决方法: ...
- CF97B Superset
嘟嘟嘟cf 嘟嘟嘟luogu 刚开始我看成了对于一个点\(i\),存在一个点\(j\)满足三个条件之一,而不是任意的\(j\).结果自然\(gg\)了,第二个点就\(WA\)了. 也不知怎么来的思路: ...
- 【vue】跟着老马学习vue-数据双向绑定
学习了node.js教程,只能说是有了一定的了解,之前也了解了webpack和es6的核心内容,也看过vue2.0的官网教程,并结合视频看过项目,但是理解和运用仍然存在很多问题,接下来的一段时间,跟着 ...
- error info: boost not variable 问题解决
错误信息:error info: boost not variable 解决办法:sudo apt-get install libboost-dev 出现这个问题的原因是我在搭建DOMJudgeOJ平 ...