：hover的使用，即当鼠标指针移入元素时，所做出的样式设置

示例一

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo01</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        ul li{

            width: 300px;

            margin-top: 10px;

            background: #ff0000;

        }

        ul li:hover{

            background: #000000;

        }

    </style>

</head>

<body>

    <ul>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</body>

</html>

以上情况存在于当鼠标指针移入元素，通过：hover使该元素自身改变新的样式

示例二

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo01</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .container{

            width: 300px;

            height: 300px;

            border: 1px solid #ff9f5a;

        }

        .content{

            width: 100px;

            height: 100px;

            background: #27e7ff;

        }

        .container:hover .content{

            background: #000000;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="content"></div>

    </div>

</body>

</html>

以上示例中，当存在父子关系的时候，可以通过父级的：hover使得子级的样式发生改变，写法为 .container:hover .content，hover后面有一个空格；但是，子级：hover改变不了父级的样式

示例三

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo01</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .container{

            width: 300px;

            height: 300px;

            border: 1px solid #ff9f5a;

        }

        .content{

            width: 100px;

            height: 100px;

            background: #27e7ff;

        }

        .container:hover +.content{

            background: #000000;

        }

    </style>

</head>

<body>

    <div class="container"></div>

    <div class="content"></div>

</body>

</html>

以上示例，当两个元素不是父子关系，为同胞兄弟关系时，则通过 .container:hover .content这样的写法是无效的，则需要通过“+”号，即 .container:hover +.content才能显示出效果；但是要注意两个元素的先后顺序哦~

      不足之处，请多多指教…

css：hover伪类的使用的更多相关文章

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

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

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

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

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

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

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

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

  5. css -- hover伪类

    CSS代码: .btn-setDefaultGateway{display: none;} .netDiv:hover span .btn-setDefaultGateway { display: i ...

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

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

  7. CSS快速入门-鼠标悬浮(hover伪类)

    一.概述 hover伪类:在鼠标移到元素上时向此元素添加特殊的样式.比较普通的就是一个url,当你鼠标放上去后,会变颜色. 在现实的应用场景也非常之多.最常见的是网站的悬浮导航,当鼠标放到导航条上时, ...

  8. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

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

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

  10. CSS :focus 伪类

    :focus -- CSS :focus 伪类,适用于已获取焦点的元素的样式 语法: :focus CSS版本:CSS2 说明: 适用于已获取焦点的元素的样式,例如:表单的input输入框可以输入文字 ...

随机推荐

  1. 洛谷 P4336 黑暗前的幻想乡 —— 容斥+矩阵树定理

    题目:https://www.luogu.org/problemnew/show/P4336 当作考试题了,然而没想出来,呵呵. 其实不是二分图完美匹配方案数,而是矩阵树定理+容斥... 就是先放上所 ...

  2. 基于zookeeper的MySQL主主负载均衡的简单实现

    1.先上原理图 2.说明 两个mysql采用主主同步的方式进行部署. 在安装mysql的服务器上安装客户端(目前是这么做,以后想在zookeeper扩展集成),客户端实时监控mysql应用的可用性,可 ...

  3. POCO库中文编程参考指南（11）如何使用Reactor框架？

    1 Reactor 框架概述 POCO 中的 Reactor 框架是基于 Reactor 设计模式进行设计的.其中由 Handler 将某 Socket 产生的事件,发送到指定的对象的方法上,作为回调 ...

  4. SpringMVC之七：SpringMVC中使用Interceptor拦截器

    SpringMVC 中的Interceptor 拦截器也是相当重要和相当有用的,它的主要作用是拦截用户的请求并进行相应的处理.比如通过它来进行权限验证,或者是来判断用户是否登陆,或者是像12306 那 ...

  5. C# 使用 MemoryStream 将数据写入内存

    转自:http://blog.csdn.net/andrew_wx/article/details/6629951 常用的MemoryStream构造函数有以下3种. 1:MemoryStream() ...

  6. openStack高可用性和灾备方案

    1. 基础知识 1.1 高可用 (High Availability,简称 HA) 高可用性是指提供在本地系统单个组件故障情况下,能继续访问应用的能力,无论这个故障是业务流程.物理设施.IT软/硬件的 ...

  7. rpm 软件包

    rpm 软件包   Linux 中有安装软件方式有两种,源码安装以及软件包安装: 压缩包:源码包,编译后安装 rpm(redhat package manager 红帽软件包管理):需要编译,直接安装 ...

  8. 根据xml文件自动生成xsd文件

    根据xml生成xsd文档 1. 找到vs自带的xsd.exe工具所在的文件夹位置: C:\Program Files (x86)\Microsoft SDKs\Windows\v7.0A\Bin 注意 ...

  9. VS~通过IIS网站启用"域名"调试

    在我们开发网站时,对某些信息进行序列化时,通常使用session,cookies,nosql等技术,而为了安全,我们在服务器上很多情况都做了防止盗链的设计,这给本机调试带来了不便,因为,本机都是以lo ...

  10. oracle数据库之分组查询(转)

    本章内容和大家分享的是数据当中的分组查询.分组查询复杂一点的是建立在多张表的查询的基础之上,(我们在上一节课的学习中已经给大家分享了多表查询的使用技巧,大家可以自行访问:多表查询1  多表查询2)而在 ...