html中div hover的用法,CSS: hover选择器的使用详解

2023-11-09

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html中div hover的用法,CSS: hover选择器的使用详解 的相关文章

随机推荐

  • 【Arthas】Arthas Command处理流程

    1 概述 转载 Arthas Command处理流程 2 开篇 这篇文章主要是为了分析Arthas的命令的执行过程 整体过程包括任务的创建和任务的执行 arthas的命令都是实现统一的接口 对外通过process方法进行调用 public
  • synchronized 为什么不能使用string对象而是要使用string.intern

    先看代码 Created by Jarvis y on 2020 11 5 public class StringTest public static void main String args String s1 Jarvis y Str
  • Linux 常用命令详细讲解

    一 目录管理 处理目录的的常用命令 ls 列出目录 cd 切换目录 cd 返回上级目录 cd 回到根目录 pwd 显示当前目录 mkdir 创建一个新的目录 rmdir 删除一个目录 cp 复制文件或目录 rm 移除目录或文件 mv 移动目
  • 使用java实现word转pdf,亲测有效,完美保留样式

    记录一下java实现word转pdf的方法 今天公司做一个需求 需要将word转pdf 但是我在网上找了很多方法 要么转换速度慢 要么转换出来的格式不一样 遇到了各种问题 绞尽脑汁后 终于找到了个不会出错的方法 在此分享给大家 首先需要引入
  • Redis日志告警关键字

    在配置Redis日志告警时 可以关注以下关键字 OOM 表示Redis达到了最大内存限制 发生了Out of Memory错误 ERR 表示发生了错误 需要进一步检查错误消息以确定具体的问题 Authentication 表示身份验证相关的
  • vmware 虚拟机共享文件夹没有显示

    sudo vmhgfs fuse host mnt hgfs o subtype vmhgfs fuse allow other
  • PyCharm 编辑器 使用基本 快捷键

    pycharm 常用快捷键 编辑 Ctrl Alt S 打开设置页 Ctrl Delete 删除到字符结束 Ctrl Backspace 删除到字符开始 Ctrl Y 删除选定的行 Crtl D 复制当前行 ctrl shift 箭头 移动
  • ES聚合分析总结

    文档的聚合分析 像在SQL中会需要SUM MAX AVG 函数 ElasticSearch也提供了关于聚合分析的函数 ElasticSearch中常见的聚合分析函数有terms 分组函数 avg 平均数 range 区间分组 max 求最大
  • #Idea中如何让package分层显示

    解释一下 创建一个java项目 首先要 选择File gt New gt Project 再创建Java文件 右击src gt New gt Package 给自己新建的包起一个名字 com 最后在新建的包上右击 gt New gt Jav
  • 【TVM源码学习笔记】2 模型导入from_onnx

    在前文模型加载时 使用relay frontend from onnx onnx model shape dict 是将onnx模型转换为TVM可以识别的Graph IR 要理解这一流程 需要对onnx模型定义有基础的了解 1 onnx模型
  • 新版个人所得税计算python_最新个税计算 / 个税计算器 小程序 wepy 开发

    根据最新税改后计算个人所得税的计算器 如有其它疑惑 也欢迎提出任何修改意见 可以在主题下留言或者在小程序中点击联系在线客服或者加入qq群 869113926 1 扫一扫 2 效果图 这次开发遇到几个问题因此记录下来 1 在开发微信小程序组件
  • 【前端】Vue项目:旅游App-(5)NavBar:结构与样式

    文章目录 目标 总代码 参考 目标 做出这个即可 总代码 写在home vue中 都是html和css
  • android动态页实现原理,Android

    本系列文章主要介绍天猫团队开源的Tangram框架的使用心得和原理 由于Tangram底层基于vlayout 所以也会简单讲解 该系列将按以下大纲进行介绍 需求背景 Tangram和vlayout介绍 Tangram的使用 vlayout原
  • 初探gitlab & gitlab-runner & asp.net core持续集成

    文章简介 gitlab gitlab runner 简介 基于gitlab gitlab runner 的asp net core webapi 极简持续集成实践 gitlab gitlab runner 简介 写在最前面 文中示例使用到了
  • Node.js后端开发 - 进阶篇 #10 express框架之封装handler.js模块

    目录 一 前言 二 封装 handler js 业务模块 步骤1 写业务模块 handler js 步骤2 路由模块 router js 调用 步骤3 其他代码贴上 主模块app js 配置模块 config js 三 最终效果 一 前言
  • KVM下虚拟机网卡桥接配置

    基本概念 KVM基本概念 KVM 全称是 Kernel based Virtual Machine 是 Linux 下 x86 硬件平台上的全功能虚拟化解决方案 包含一个可加载的内核模块 kvm ko 提供和虚拟化核心架构和处理器规范模块
  • 在安卓手机搭建kali环境,手机变成便携式渗透神器

    kali是著名的黑客专用系统 一般都是直接装在物理机或者虚拟机上 我们可以尝试把kali安装在手机上 把手机打造成一个便携式渗透神器 我们需要下载以下3款软件 1 Termux 终端模拟器 2 AnLinux 里边有各种安装liunx的命令
  • 离散数学期末复习—学习笔记

    主要是看ppt和做课后练习 数理逻辑 1 命题逻辑的基本概念 1 1 命题与连接词 1 2 命题公式及其赋值 1 3 习题 2 命题逻辑等值演算 2 1等值式 基本等值式 16组 24个公式 2 2 析取范式和合取范式 主要是主析取范式和主
  • kettle入门教程

    目录 1 kettle叙述 1 1什么是kettle 1 2kettle工程存储方式 1 3kettle两种设计 1 4kettle的组成 1 5kettle的下载安装 2 kettle教程 2 1转换 2 1 1普通转换 2 1 2执行s
  • html中div hover的用法,CSS: hover选择器的使用详解

    有些时候需要用到mouseover和mouseout这两个鼠标事件 但是写js又比较麻烦 还要添加监听事件 所以能用css解决的东西尽量yongcss解决 这样可以提高性能 下面说一下我对 hover 的了解 之前在学计算机应用的时候 老师