一、概述

hover伪类：在鼠标移到元素上时向此元素添加特殊的样式。比较普通的就是一个url，当你鼠标放上去后，会变颜色。

在现实的应用场景也非常之多。最常见的是网站的悬浮导航，当鼠标放到导航条上时，会出现颜色变化或者元素自动伸出菜单栏。

实例1：鼠标hover时，将内容框起来

Title

222

111

原始效果：

鼠标悬停后：

实例2：尾品会vdangdang.com首页最下面有这样的图片

原始网页：

鼠标悬停后效果：

其实这个主要就是用hover制作而成。下面说一下具体实现：

实现思路：

1、新建一个div12、新建一个div2，把底部图片放入div23、再新建一个div3，悬浮内容放入div3

HTML代码：

品牌故事

我们的源泉不是时尚，不是潮流，而是由心而发的喜爱，将精致华丽的艺术融入东方式的低调，都只为了一个人而存在。

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代码：

Title

品牌故事

我们的源泉不是时尚，不是潮流，而是由心而发的喜爱，将精致华丽的艺术融入东方式的低调，都只为了一个人而存在。

关键知识点：

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时放出内容，并且设置背景透明度，可以看到背景图片；