html中div hover的用法,CSS: hover选择器的使用详解
有些时候需要用到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代码:
css样式:
.animation {
width: 100px;
height: 100px;
background-color: pink;
margin: 100px auto;
animation: move 2s infinite alternate;
-webkit-animation: move 2s infinite alternate;
}
@keyframes move {
0% {
transform: translate(-100px, 0);
}
100% {
transform: translate(100px, 0);
}
}
.btn {
padding: 20px 50px;
background-color: pink;
color: white;
display: inline-block;
}
.stop:hover ~ .animation {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
实现效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html中div hover的用法,CSS: hover选择器的使用详解相关推荐
- JS 中关于Promise的用法,状态,执行顺序详解,面试可用(原创)
前言 在实际项目中我们常会去用已经封装好的promise如axios,或者也会自己去封装promise,甚至在面试中,关于promise的面试题也层出不穷,promise的重要性不言而喻,故写该文章记 ...
- python中if else语句用法_Python if else条件语句详解
前面我们看到的代码都是顺序执行的,也就是先执行第1条语句,然后是第2条.第3条--一直到最后一条语句,这称为顺序结构. 但是对于很多情况,顺序结构的代码是远远不够的,比如一个程序限制了只能成年人使用, ...
- python中complex函数的用法_Python 内置函数complex详解
英文文档: class complex([real[, imag]]) Return a complex number with the value real + imag*1j or convert ...
- php 点号 的用法,基于php中echo用逗号和用点号的区别详解
php 的 基于php中echo用逗号和用点号的区别详解 实例如下: echo 1+5; echo " "; echo '1+5='."1+5"." ...
- html css主题,HTML+CSS=无限可能——案例详解:我的POI主题作品
原标题:HTML+CSS=无限可能--案例详解:我的POI主题作品 在微博发了这个作业,收到很多好评,实在太开心! 斌叔让我来投稿,那今天就以这个网页为案例,把制作过程中我的方法和经验分享给大家. 作 ...
- CSS transition(过渡效果)详解
CSS transition(过渡效果)详解 通常当 CSS 的属性值更改后,浏览器会立即更新相应的样式,例如当鼠标悬停在元素上时,通过 :hover 选择器定义的样式会立即应用在元素上.在 CSS3 ...
- CSS clear 属性取值详解
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作 ...
- html内联元素和块元素的特性,HTML中块级元素和内联元素的特性详解
原标题:HTML中块级元素和内联元素的特性详解 在网站布局中经常会遇到元素进行居中的时候,设置了text-align:center:margin:0 auto;有时候会起作用,但有时候对居中无效,刚接 ...
- CSS动画(animation)详解
CSS动画(animation)详解 通过<CSS过渡>一节的学习我们知道,利用 transition 属性可以实现简单的过渡动画,但过渡动画仅能指定开始和结束两个状态,整个过程都是由特定 ...
- php 自动获取头像,PHP_WordPress中用于获取及自定义头像图片的PHP脚本详解,get_avatar()(获取头像)
get_avat - phpStudy...
WordPress中用于获取及自定义头像图片的PHP脚本详解 get_avatar()(获取头像)get_avatar() 函数用来获取置顶邮箱或者用户的头像代码,在评论列表中非常常用. 这个函数提供 ...
最新文章
- python语言入门与精通-终于懂得python从入门到精通教程
- Flutter 制作漂亮的登录表单
- python generator_Python 生成器 generator
- 人之间的尊重是相互的_人与人之间,尊重很重要
- ubuntu16.04 装机4:安装防火墙ufw
- 为什么日志只应该有三个级别
- Leetcode刷题笔记(部分非原创)(1-20题)
- 【TensorFlow系列】【九】利用tf.py_func自定义算子
- 红外通信红外编码—NEC协议
- Docker 安装(使用阿里源)
- C程序10 自由落体
- python-web开发[16-18]之Django开发
- Aras Innovator 完整安装详细教程
- 攻防世界 reverse reverse-for-the-holy-grail-350
- NBOJ 1181 Big Mouth of Abyss - Kog'Maw
- poi XWPFDocument文档转换成io流
- 【解决问题】修复虚拟机报错,写入文件时出错,请确认您有访问该目录的权限
- 什么是线性表?线性表的特点,线性表的顺序存储和链式存储
- Thread.setDaemon
- 【观察】甲骨文:以创新为本,以生态为核,加速中国企业数字化进程
热门文章
- 红月服务器制作过程,红月3.8C私服架设教程
- citespace下载安装教程
- H3C网络流量镜像配置
- 获取打开的记事本中的内容 - 回复 ymg1103 的问题
- WIN10下msi GE62 1077 无线热点掉线问题处理(更新:取消自动关闭热点
- flash activex java_Adobe flash player ActiveX和NPAPI和PPAPI 这三个软件有什么区别?哪个是不必要的?...
- 2022最新个人所得税计算(附代码)
- Best Buy百思买验厂反恐标准手册/反恐程序要求
- word:如何将文档中的中文和英文分开
- 一个好中医就是一座全科医院