CSS: hover选择器的使用

Prasanta 发布于2019-08-01 18:05 / 1489人阅读

摘要：有些时候需要用到和这两个鼠标事件，但是写又比较麻烦，还要添加监听事件，所以能用解决的东西尽量解决，这样可以提高性能，下面说一下我对的了解之前在学计算机应用的时候，老师教我们使用了选择器来完成下拉菜单，之前只知道怎么使用，并不知道为什么要这么

有些时候需要用到mouseover和mouseout这两个鼠标事件，但是写js又比较麻烦，还要添加监听事件，所以能用css解决的东西尽量yongcss解决，这样可以提高性能，下面说一下我对:hover 的了解:
之前在学计算机应用的时候，老师教我们使用了:hover选择器来完成下拉菜单，之前只知道怎么使用，并不知道为什么要这么用，现在记下怎么使用吧

定义和用法

定义：
:hover 选择器用于选择鼠标指针浮动在上面的元素。
:hover 选择器适用于所有元素

用法1：
这个表示的是：当鼠标悬浮在a这个样式上的时候，a的背景颜色设置为黄色

a:hover
    { 
        background-color:yellow;
    }

这个是最普通的用法了，只是通过a改变了style
用法2:
使用a 控制其他块的样式：

使用a控制a的子元素 b：

    .a:hover .b {
            background-color:blue;
        }

使用a控制a的兄弟元素 c(同级元素)：

    .a:hover + .c {
            color:red;
        }

使用a控制a的就近元素d：

    .a:hover ~ .d {
            color:pink;
        }

总结一下：

1. 中间什么都不加  控制子元素；
2. ‘+’ 控制同级元素（兄弟元素）；
3. ‘～’ 控制就近元素；

实例

用一个按钮控制一个盒子的运动状态，当鼠标移到按钮上方时，盒子停止运动，鼠标移开时，盒子继续运动

body代码：

    
        stop

css样式：

实现效果：

云服务器 GPU云服务器服务器管理器的使用 css选择 css选择器基础选择器css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51575.html

玩转CSS选择器（二）之浏览器支持，常见Bug，性能优化

摘要：本节内容会跟着上一节的内容继续完善，首先会补充选择器的浏览器支持情况主要是说，比如我们最常用的群组选择器在时才被支持，并且还支持了很多我们没有想到的选择器，如子元素选择器，属性选择器，了解后你会发现还是挺了不起的。前言上一篇系列文章整理了CSS选择器的基础使用方法，因为内容较多且细致，写了很多DEMO，目前将它整理成适合移动端浏览器的CSS选择器的参考手册，方便学习CSS的人参考使...

y1chuan 2019-08-28 18:16 评论0 收藏0
CSS: hover选择器的使用

摘要：有些时候需要用到和这两个鼠标事件，但是写又比较麻烦，还要添加监听事件，所以能用解决的东西尽量解决，这样可以提高性能，下面说一下我对的了解之前在学计算机应用的时候，老师教我们使用了选择器来完成下拉菜单，之前只知道怎么使用，并不知道为什么要这么有些时候需要用到mouseover和mouseout这两个鼠标事件，但是写js又比较麻烦，还要添加监听事件，所以能用css解决的东西尽量yongc...

joyvw 2019-08-29 13:54 评论0 收藏0
CSS 属性选择器的深入挖掘

摘要：如果页面上的链接很多或者对跳转页面的协议有要求，使用属性选择器配合伪元素对链接的协议进行提示也不失为一种好方法。 CSS 属性选择器，可以通过已经存在的属性名或属性值匹配元素。属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文将会比较全面的介绍属性选择器，尽可能的去挖掘这个选择器在不同场景下的不同用法。简单的语法介绍 [attr]：该选择器选择包含 att...

luoyibu 2019-08-30 11:15 评论0 收藏0
Sass 语法规则

摘要：首先，和使用同一种语法，但是写法有所不同。如果一个混合器只包含规则，不包含属性，那么该混合器就可以在文档的顶部调用，用于全局。首先，sass和scss使用同一种语法，但是写法有所不同。sass在编写的时候不适用 { 和 } 来包括，每一句的末尾也不可以用 ; 来结束。而scss则完全可以按照css的写法编写，本篇基本使用sass的写法。 1 变量 1-1 变量声明在sass中可以使...

Magicer 2019-08-29 14:03 评论0 收藏0
Sass快速入门学习笔记

摘要：在中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。这个过程中，用了两步，每一步都是像打开俄罗斯套娃那样把里边的嵌套规则块一个个打开。与此类似，会命中元素和类名为的元素。这种选择器称为群组选择器。1. 使用变量; sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一次的属...

appetizerio 2019-04-23 13:44 评论0 收藏0