科技 >

css中的hover怎么用 hover的定义hover的用法

2022-05-24 15:41:32   来源:PHP中文网

在css中hover用于选择鼠标指针浮动在上面的元素,语法“标签选择器:hover{样式代码;}”,用法:1、直接在悬浮元素上改变样式;2、改变子元素的样式;3、改变同级元素的样式;4、改变就元素的样式等。

在CSS中有个hover属,当鼠标移上去的时候可以将其激活,它可以用来实现类似于js的一些功能。接下来在文章中将为大家具体介绍hover属如何使用,希望对大家有所帮助。

hover的定义

:hover 选择器用于选择鼠标指针浮动在上面的元素,它适用于所有元素

:hover 选择器适用于所有元素

hover的用法

用法一:鼠标悬浮在元素上改变元素样式

例:当鼠标悬浮在字体上,字体颜色发生改变

1

2

3

4

5

6

7

8

9

 

<style>

h1:hover{

color: pink;

}

</style>

</head>

<body>

<h1>PHP中文网</h1>

</body>

 

效果图:

这个是最普通的用法了,只是改变了style样式

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

这个用法可以有分为以下三种样式

(1)控制子元素的样式

1

2

3

4

5

6

7

8

9

10

 

<style>

h1:hover p{

background-color: pink;

}

</style>

</head>

<body>

<h1>PHP中文网

<p>hover的用法</p>

</h1>

 

效果图:

(2)控制兄弟元素的样式

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

1

2

3

4

5

6

7

8

9

 

<style>

h1:hover+p{

background-color: pink;

}

</style>

</head>

<body>

<h1>PHP中文网</h1>

<p>hover的用法</p>

 

效果图:

(3)控制就元素的样式

‘~’ 控制就元素

1

2

3

4

5

6

7

8

9

 

<style>

h1:hover~p{

background-color: pink;

}

</style>

</head>

<body>

<h1>PHP中文网</h1>

<p>hover的用法</p>

 

标签: css中的hover怎么用 元素样式

相关阅读

Dell笔记本电脑Fn功能键怎么设置?Dell笔记

科技

要解决的问题Dell笔记本电脑在键盘的左下方有Fn键,我们以F5键的刷新功能为例。在默认设置下,要使用键盘上方的功能键时,如F5刷新,需要按Fn+F

2022-12-06

Word只能在安全模式下启动怎么办?Word只能

科技

故障表现:word突然不能正常启动,并有提示框:(遇到问题需要关闭,并提示尝试恢复。)但恢复后立即出现提示:(WORD上次启动时失败,以安全模

2022-12-06

steam未响应怎么办?steam未响应解决方法

科技

steam未响应怎么办?steam未响应刚才兴冲冲弄好游戏,点开始,和部分玩家一样没响应,在网上搜了搜解决办法,3DM那边有用替换法的,觉得太麻

2022-12-06

maxdos 9.3怎么用?maxdos工具箱9.3使用教程

科技

小编带来了maxdos 9 3使用教程,很多朋友不知道maxdos工具箱9 3怎么用,下文将会介绍maxdos工具箱9 3的功能以及相应的使用方法,有需要的

2022-12-06

腾讯qq端口是什么?腾讯qqht接口是什么?

科技

腾迅QQ的端口是什么?计算机端口是英文port的意译,可以认为是计算机与外界通讯交流的出口。腾讯的端口就是相对于一个接口,而连接的计算机

2022-12-06

Dell笔记本电脑Fn功能键怎么设置?Dell笔记本电脑Fn功能键设置步骤

科技

要解决的问题Dell笔记本电脑在键盘的左下方有Fn键,我们以F5键的刷新功能为例。在默认设置下,要使用键盘上方的功能键时,如F5刷新,需要按Fn+F

2022-12-06

Word只能在安全模式下启动怎么办?Word只能在安全模式下启动处理方案

科技

故障表现:word突然不能正常启动,并有提示框:(遇到问题需要关闭,并提示尝试恢复。)但恢复后立即出现提示:(WORD上次启动时失败,以安全模

2022-12-06

steam未响应怎么办?steam未响应解决方法

科技

steam未响应怎么办?steam未响应刚才兴冲冲弄好游戏,点开始,和部分玩家一样没响应,在网上搜了搜解决办法,3DM那边有用替换法的,觉得太麻

2022-12-06

maxdos 9.3怎么用?maxdos工具箱9.3使用教程

科技

小编带来了maxdos 9 3使用教程,很多朋友不知道maxdos工具箱9 3怎么用,下文将会介绍maxdos工具箱9 3的功能以及相应的使用方法,有需要的

2022-12-06

腾讯qq端口是什么?腾讯qqht接口是什么?

科技

腾迅QQ的端口是什么?计算机端口是英文port的意译,可以认为是计算机与外界通讯交流的出口。腾讯的端口就是相对于一个接口,而连接的计算机

2022-12-06

两个有线路由器如何连接设置?两个有线路由器的连接设置方法

科技

如果只有一个网络可以用,而却有两个有线路由器,那么怎么将其连接起来呢?本文的方法适合于路由器本身没有WDS或者两个路由器不是同一型号,

2022-12-06

wps如何加水印?wps加水印方法

科技

在一些文档中,我们常看到作者给加上了水印背景,用来显示一些特殊的信息,如下图中的***九天考资。下面我们就来看一下,这样的水印背景是

2022-12-06

如何开启360安全卫士反勒索服务?360安全卫士反勒索服务开启步骤

科技

360安全卫士是一款功能强大的电脑管理软件,有些用户出于安全考虑,想知道如何开启软件反勒索服务,接下来小编就给大家介绍一下具体的操作

2022-12-06

wcdma是什么网络?wcdma介绍

科技

WCDMA 是英文Wideband Code Division Multiple Access(宽带码分多址)的英文简称,是一种第三代无线通讯技术。W-CDMAWideband CDMA

2022-12-06

如何解决电脑QQ无法传输文件问题?电脑QQ无法传输文件解决方法

科技

QQ是现在最常用的社交、办公软件之一,有些用户遇到了电脑QQ无法传输文件问题,不知道如何解决,接下来小编就给大家介绍一下具体的操作步骤

2022-12-06

遇见旗袍是于万千人群中的惊鸿一瞥 沿途洒满了爱的芬芳

旗袍,中国和世界华人女性的传统服装,被誉为中国国粹和女性国服。虽然其定义和产生的时间至今还存有诸多争议,但它仍然是中国悠久服饰文化

北京市电影院有序恢复开放 周五预售部分场次已满座

7月21日,北京市政府发布《北京市电影局关于在疫情防控常态化条件下有序推进电影院恢复开放的通知》,宣布全市低风险地区影院,可于7月24日

近期持续强降雨影响 第46届武汉渡江节因长江水位过高取消

武汉7·16渡江节组委会14日发布公告,由于长江武汉关水位超警戒水位,按照规定取消2020年第46届武汉7·16渡江节。受近期持续强降雨影响,

“非遗”普及受众最看重“动手”参观大师工作室非常享受

过去一段时间,国家级非遗项目灰塑传承人邵成村,多次在陈家祠等工作现场,向身边那些带着好奇目光的人们讲解灰塑的种种技术细节:草根灰、

璧山冷酒夜市 丰富市民夜间文旅活动

7月13日,位于璧山区南门唐城夜市街区的璧山冷酒夜市开街。这是璧山区打造夜间经济消费载体、培育夜间经济活动品牌的举措之一。璧山市民一

年内两市超过500家上市公司完成回购 累计回购金额超332亿元

近期A股市场持续震荡,不少上市公司或其重要股东推出回购、增持计划,用真金白银力挺股价。记者根据同花顺数据统计,今年以来,两市超过500

持续发力补链强链加大研发抢占市场 渝企跑出“加速度”

玥湖路渝快电充换电站 一辆新能源汽车,离不开研发、动力、配套等多个环节。作为汽车制造重镇,重庆在这些环节的多个板块上,正在加速奔跑

重启上市公司资本运作 康佳集团去年半导体业务营业收入为3.22亿元

近日,康佳集团正式对外发布2021年年度业绩报告。2021年,康佳集团实现全年营收491 07亿元,归属于母公司的净利润为9 05亿元,同比增长89 5

伟禄集团连续6年增长 去年营收同比增长37.5%

深港通标的之一的深圳企业伟禄集团近日公布2021年业绩。财报数据显示,伟禄集团全年营业收入11 95亿港元,同比增长37 5%,连续6年稳步增长;

龙头企业去年净利倍增 整个行业营收规模有望创造历史新高位

近日,面板龙头TCL科技、京东方分别发布2021年度业绩快报,两家企业去年归属于上市公司股东的净利润分别增长129 3%、412 86%,实现超过百亿

深圳国企全力为市民 守好“菜篮子”“米袋子”保障量足价稳

疫情防控形势下,民生物资供应是否充足成为市民最为关注的问题之一。连日来,深农集团、深粮控股等企业,充分发挥国企担当,全力为深圳市民