css中的hover怎么用

清浅
풀어 주다: 2020-10-13 09:08:32
원래의
110638명이 탐색했습니다.

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

css中的hover怎么用

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

【推荐课程:CSS教程

hover的定义

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

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

hover的用法

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

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

 
  

PHP中文网

로그인 후 복사

效果图:

css中的hover怎么用

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

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

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

(1)控制子元素的样式

 
  

PHP中文网

hover的用法

로그인 후 복사

效果图:

css中的hover怎么用

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

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

 
  

PHP中文网

hover的用法

로그인 후 복사

效果图:

Image 004.png

(3)控制就近元素的样式

‘~’ 控制就近元素

 
  

PHP中文网

hover的用法

로그인 후 복사

效果图:

Image 004.png

总结:以上就是本篇文章的全部内容了,希望对大家有所帮助。

위 내용은 css中的hover怎么用의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!