一、概述

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伪类)的更多相关文章

  1. CSS :hover伪类选择定义和用法

    伪类选择符E:hover的定义和用法: 设置元素在其鼠标悬停时的样式.E元素可以通过其他选择器进行选择,比如使用类选择符.id选择符.类型选择符等等.特别说明:IE6并非不支持此选择符,但能够支持a元 ...

  2. 利用CSS hover伪类改变其他元素的总结

    :hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮 ...

  3. 【笔记】css hover 伪类控制其他元素

    最近在模仿一个网站的项目 当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的 但是这有一个要求 就是添加hov ...

  4. CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

  5. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

  6. 理解是最好的记忆方法 之 CSS中a链接的④个伪类为何有顺序

    理解是最好的记忆方法 之 CSS中a链接的④个伪类为何有顺序 在CSS中,a标签有4种伪类,分别为: a:link, a:visited, a:hover, a:active 对其稍有了解的前端er都 ...

  7. 用:hover伪类代替js的hover事件

    制作二级菜单要实现鼠标移动上去显示子菜单,鼠标移出子菜单隐藏,或者其他类似需求的地方,首先我会想到用jquery的hover事件来实现,如: $(".nav").hover(fun ...

  8. CSS快速入门（四）

    目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...

  9. CSS快速入门-属性和伪类

    一.属性选择器 <div class="gradefather"> hello1 <div name="son">hello2 < ...

随机推荐

  1. 【C语言】 任意十进制数字转十六进制

    大概思路:输入任意十进制数字 首先确定位数: 使用整形数组来存储十六进制数: a[0] 表示十六进制数字的位数: #include <stdio.h> #include <stdli ...

  2. zhuangxiu

    红宝石家居广场国际家居馆 党湾综合市场(青年文明路)

  3. September 19th 2017 Week 38th Tuesday

    Live boldly. Push yourself. Don't settle. 勇敢生活,突破自我,永不设限! Don't indulge in the past, whether it was ...

  4. November 22nd 2016 Week 48th Tuesday

    Eventually, you will learn to cry on the inside. 终有一天,你得学会让眼泪在心里流. Cry on the inside. I am tired, an ...

  5. UI（一）

    1.AfxWinMain 首先,MFC程序先执行到TheApp实例化对象也就是通过这句CTestApp the App来实例化对象的然后,调用CTestApp构造函数分配内存空间 然后,就调用了Afx ...

  6. php实现简单的单链表

    <?php /** * 建立一个链表,节点的data为数组,记录一个id,完成链表所以操作 */ //结点,结点数据data定义为一个数组,id和value class Node{ public ...

  7. OSM

    一.OSM是什么 开放街道图(OpenStreetMap,简称OSM)是一个网上地图协作计划,目标是创造一个内容自由且能让所有人编辑的世界地图(wiki:http://wiki.openstreetm ...

  8. Core WebAPI 入门

    官方文档地址 https://docs.microsoft.com/zh-cn/aspnet/?view=aspnetcore-2.2#pivot=core 使用 ASP.NET Core 构建 We ...

  9. 使用ROS节点——Node & Master——roscore、rosrun、rosnode

    1.Node 在ROS的世界里, 最小的进程单元就是节点( node) . 一个软件包里可以有多个可执行文件, 可执行文件在运行之后就成了一个进程(process), 这个进程在ROS中就叫做节点. ...

  10. 代码中会话同步（同步redis）导致的异常问题

    背景: 第一天拷贝了一份tomcat(配置了redis会话同步),部署了erp-rocketmq应用(用作给顾客发送消息).            第二天早晨,整个erp系统出现异常情况: 1> ...