：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. web攻击之零：WEB攻击及防御技术汇总

    一.XSS攻击 [介绍] xss攻击是跨站脚本攻击,例如在表单中提交含有可执行的javascript的内容文本,如果服务器端没有过滤或转义这些脚本,而这些脚本由通过内容的形式发布到了页面上,这个时候如 ...

  2. linux工具————fish shell

    1.说明 fish is a fully-equipped command line shell (like bash or zsh) that is smart and user-friendly. ...

  3. c# 鼠标点击控件即拖动窗体

    在编程中,有时打开的窗体没有边框,但是我们仍然想在鼠标放在窗体上就能拖动窗体,这样我们只需要以窗体中的一个控件为参考,我们在这里以panel为例子: public class PanelNew : P ...

  4. 使用makefile编译多个文件（.c , .cpp , .h等）

    有时候我们要一次运行多个文件,这时候我们可以使用Makefile!!! ◊make是什么? make是一个命令工具,是一个解释makefile中指令的命令工具.它可以简化编译过程里面所下达的指令,当执 ...

  5. FZU 2219【贪心】

    思路: 因为工人造完一个房子就死了,所以如果m<n则还需要n-m个工人. 最优的方案应该是耗时长的房子应该尽快建,而且最优的是越多的房子在建越好,也就是如果当前人数不到n,只派一个人去分裂. 解 ...

  6. 3DMAX 10 角色动作

    基本流程 1保存初始姿势(保存原始T动作) 2确定动画帧数时间 3找参考动作姿态,绘制关键帧草图 4先调整出初始姿势,如果是循环动画,需要把第一帧复制到最后一帧 5大体先想好在固定时间比例调草图的关键 ...

  7. django 模版 语法与使用

    目录 django 模版语法与使用 django模板语言介绍 (摘自官方文档) 链接 什么是模板? 模板语句的 注释 变量 {{ 变量 }} 点(.)在模板语言中有特殊的含义,用来获取对象的相应属性值 ...

  8. maven工程运行出Unable to compile class for JSP: 错误

    使用mvn tomcat:run运行时出现500错误,使用tomcat7再次运行就好了 更新,上面的是在命令行操作的 如果要在idea上面出现错误的话需要在pom.xml上配置下面的语句 org.ap ...

  9. Tomcat 指定jdk

    Windows 下 修改 tomcat根目录/bin/setclasspath.bat 文件 如下: rem Otherwise either JRE or JDK are fine set JAVA ...

  10. docker安装及概述

    相关快捷键 退出:Ctrl-D or exit detach:Ctrl-P + Ctrl-Q Docker 核心技术 1.Namespace — 实现Container的进程.网络.消息.文件系统和主 ...