CSS的hover属性

news2025/2/24 22:35:16

1.hover的定义

:hover在鼠标移到链接上时添加的特殊样式

:hover适用于任何元素

2.hover的使用方法

用法1:控制自身的样式

鼠标悬浮在元素上改变元素样式,改变本身的背景颜色,例如:

 

     

用法2:通过hover控制其他块的样式

(1)控制子元素的样式 :

‘>’ 控制子元素,子元素选择器使用大于号">"做为连接符

子元素选择器只能选择作为某元素子元素的元素

例如:item是父元素,第一个p是其子元素,所以son的字体会标红.(注意:son1和son2外面还包着一层,所以这个是不生效的)

 

 

 

图2

 

 

  (2) 控制后代元素的样式 :

‘ ’ 控制后代元素

父元素与子元素必须用空格隔开,从而表示选中某个元素下的子元素

例如:item是父元素,只要是item里面的p都会被选中,所以son,son1,son2的字体都会被选中,变红色字体

 

理解:子选择器只作用于其第一代元素,而后代选择器作用于N(N为自然数)代元素

(3)控制兄弟元素的样式 :

‘+’ 控制同级元素(兄弟元素)

选择的是item-son紧跟着后面的span元素,是递进的关系,是该兄弟元素与其相邻

 

 

(4)控制就近元素的样式 :

‘~’ 控制就近元素

改变其指定的兄弟元素,两个元素相不相邻都行

 

 

结语:个人学习理解,仅供参考.

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405690.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【React Router 6 快速上手二】useParams / useSearchParams / useLocation / 编程式路由导航useNavigate等API

前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻React专栏 之前学习了react-router-dom5版本的相关内容 参考文章👉🏻React路由组件传参的三种方式和 【React路由】编程式路由导航 回顾上篇文章&#x1f449…

nvm管理node版本

nvm 使用 1. nvm介绍 nvm 全英文也叫 node.js version management,是一个 nodejs 的版本管理工具 nvm 和 npm 都是 node.js 版本管理工具,为了解决 node.js 各种版本存在不兼容现象可以通过它可以安装和切换不同版本的 node.js 2. 安装与配置 2-1 nv…

CSS绝对定位(absolute)、相对定位(relative)方法(详解)

CSS中几种常用的定位方法,直接上干货! 什么是定位? 元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定 position属性。他们也有不同的工作方式,这…

Echarts直角坐标系x轴y轴属性设置大全

1、Echarts版本 "echarts": "^5.3.3", 2、最简单的直角坐标系,以柱状图为例。 常见的直角坐标系,x轴设置type: category,为类目轴,适用于离散的类目数据;y轴设置type: value,为数值轴…

前端编程中你是如何进行调试代码的?这篇文章让你学会更多调试方法——前端新手进阶

要我讲就是:对自己代码自信的人,从来不需要调试,只是log一下值是否符合预期(doge)。 哈哈,这当然是一句玩笑话,不管你是刚刚起步的新手,还是从业多年的老手,编程中或多或少都会遇到一些瓶颈&…

Vue3中的watch监听

目录 一、监听基础ref类型 1、监听单个ref数据 2、 监听多个ref数据 二、监听reactive类型 1、监听对象中单个属性 2、监听对象中多个属性 3、同时监听ref基本类型数据和reactive对象中的属性 4、监听整个对象 5、监听对象中值为对象的属性 三、watchEffect 一、监听基础…

JS数组方法中哪些会改变原数组,哪些不会?

前言 作为一名前端开发人员,我们每天都会与数组打交道。JS 也提供了很多操作数组的原生 API 供我们调用。在这些方法里面,有的方法会改变原数组,有些不会改变原数组。别看这一点小小的区别,往往会造成巨大的影响,特别…

HTML常用标签超详细整理

HTML概述 1.1 什么是HTML HTML是做网站的、Web开发、互联网生态开发(PC端移动端微应用) 目前我们使用的都是HTML5,支持传统的PC端开发,还支持移动端开发还支持微应用开发,从而替换了部分传统的移动端开发技术 1.2 HTML概念 HTML:Hyper Text Markup Language&#…

小满Vue3第三十六章(Vue如何开发移动端)

视频教程Vue3 vite Ts pinia 实战 源码 全栈_哔哩哔哩_bilibili 如果使用npm init vuelatest 报错 error when starting dev server: Error: Cannot find module node:path nodejs 升级为16版本就好了 开发移动端最主要的就是适配各种手机,为此我研究了一套…

让div居中的方式的几种方法

让div水平居中的方式的几种方法。 文章目录 一、margin二、绝对定位三、子元素绝对定位父元素相对定位四、flex布局总结 一、margin 第一种方式我们可以利用外边距属性来使div水平垂直居中 先来看一段有问题的代码 <!DOCTYPE html> <html lang"en"> &…

React框架创建项目详细流程-项目的基本配置-项目的代码规范

文章目录React创建项目流程与规范项目规范项目配置目录结构样式重置Router配置Redux状态管理axios配置React创建项目流程与规范 项目规范 项目规范: 在项目中都会有一些开发规范和代码风格, 下面介绍一下我采用的规范与风格 文件夹、文件名称统一小写、多个单词以连接符(-)连…

vue实战--vue+elementUI实现多文件上传+预览(word/PDF/图片/docx/doc/xlxs/txt)

需求 最近在做vue2.0element UI的项目中遇到了一个需求&#xff1a;需求是多个文件上传的同时实现文件的在线预览功能。需求图如下&#xff1a; 看到这个需求的时候&#xff0c;小栗脑袋一炸。并不知道该如何下手&#xff0c;之前的实践项目中也并没有遇到相似的功能。因此也…

webpack配置

webpack 前端工程化 实际的前端开发 模块化&#xff08;js 的模块化、css 的模块化、资源的模块化&#xff09; 组件化&#xff08;复用已有的 UI 结构、样式、行为&#xff09; 规范化&#xff08;目录结构的划分、编码规范化、接口规范化、文档规范化、Git 分支管理&…

【Web前端】CSS-盒子模型

文章目录一、盒子模型1、网页布局的本质2、盒子模型&#xff08;Box Model&#xff09;组成3、边框&#xff08;border&#xff09;3.1、边框的使用3.2、表格的细线边框3.3、边框会影响盒子实际大小4、内边距&#xff08;padding&#xff09;4.1、内边距的使用方式4.2、内边距会…

CSS响应式布局(自适应布局)

CSS 响应式布局也称自适应布局&#xff0c;是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念&#xff0c;简单来讲就是一个网站能够兼容多个不同的终端&#xff08;设备&#xff09;&#xff0c;而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。…

一文弄懂Vue与Servlet的交互:让你的大学课设变得容易起来

文章目录1 写作动机2 准备工作3 前端请求3.1 get请求3.1.1 仿照网站栏撰写3.1.2 按照Parms格式传参3.2 Post请求3.2.1 按照Data格式传参3.2.2 按照Params格式传参3.3 一个特殊的点4 后端接收请求4.1 提要4.2 代码4.2.1 架子4.2.2 模块一&#xff1a;获取参数4.2.3 模块二&#…

【微信小程序】选择器组件picker

文章目录【微信小程序】选择器组件pickerpicker组件的定义picker组件的类型picker属性共同的属性时间选择器time参考【微信小程序】选择器组件picker picker组件的定义 picker组件是一种从底部向上弹起的滚动选择器。 picker组件的类型 在官方文档中&#xff0c;有提供五种…

【uni-app系列】uni-app之nvue使用

目录一、介绍二、新建 nvue 页面三、开发四、nvue 开发与 vue 开发的常见区别一、介绍 uni-app App 端内置了一个基于 weex 改进的原生渲染引擎&#xff0c;提供了原生渲染能力。 在 App 端&#xff0c;如果使用 vue 页面&#xff0c;则使用 webview 渲染&#xff1b;如果使用…

无界(wujie)微前端实现及三种通信方式介绍

一、对比 之前介绍过前段时间比较流行的微前端框架qiankun&#xff0c;虽然实现了微前端的理念&#xff0c;但是也暴露出很多缺点&#xff0c;比如官网上讲到的四点&#xff1a; 基于路由匹配&#xff0c;无法同时激活多个子应用&#xff0c;也不支持子应用保活改造成本较大&…

echarts:饼图标签formatter的使用/饼图自定义标签

需求描述 需要实现一个“五彩斑斓”的饼图&#xff1a;每块饼上的标签颜色与这块饼的颜色一致。 实现思路 要改变饼图标签的颜色&#xff0c;需要参考echarts饼图label配置项&#xff0c;以及这个很棒的官方示例&#xff1a;饼图引导线调整。从这个示例中可以了解到自定义标…