资讯专栏INFORMATION COLUMN

CSS: hover选择器的使用

joyvw / 580人阅读

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

有些时候需要用到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样式:

    

实现效果:

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

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

相关文章

  • 玩转CSS选择器(二) 之 浏览器支持,常见Bug,性能优化

    前言 上一篇系列文章整理了CSS选择器的基础使用方法,因为内容较多且细致,写了很多DEMO,目前将它整理成适合移动端浏览器的CSS选择器的参考手册,方便学习CSS的人参考使用,马上就要搞定了,之后会放出 (笑脸)。 本节...

    y1chuan 评论0 收藏0
  • CSS: hover选择器的使用

    ...解:之前在学计算机应用的时候,老师教我们使用了:hover选择器来完成下拉菜单,之前只知道怎么使用,并不知道为什么要这么用,现在记下怎么使用吧 定义和用法 定义::hover 选择器用于选择鼠标指针浮动在上面的元素。:hover ...

    Prasanta 评论0 收藏0
  • CSS 属性选择器的深入挖掘

    CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素。 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场景下的不同用法。 简...

    luoyibu 评论0 收藏0
  • Sass 语法规则

    ... margin-bottom: 1.4rem } .contanin aside { background-color: #abc } 2-2 父选择器的标识符:& 当想要通过嵌套给父级元素设置伪类事件时,如果我们这样写: // scss语句 article a { color: blue; :hover { color: red } } 这样的结果是给article中a链接的所有...

    Magicer 评论0 收藏0
  • Sass快速入门学习笔记

    ...起来太丑了。),比如$highlight-color和$sidebar-width。为什么选择$ 符号呢?因为它好认、更具美感,且在CSS中并无他用,不会导致与现存或未来的css语法冲突。 1-1. 变量声明; sass变量的声明和css属性的声明很像: $highlight-color: #F90; ...

    appetizerio 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<