广告位联系
返回顶部
分享到

CSS中的hover属性使用方法介绍

css 来源:互联网 作者:佚名 发布时间:2023-06-09 21:52:00 人浏览
摘要

css 的 hover 属性是一种伪类选择器,它可以用来在鼠标悬停在某个元素上时改变该元素或其子元素、同级元素、相邻元素的样式 。hover 属性可以应用于任何元素,不仅仅是链接 。使用

css 的 hover 属性是一种伪类选择器,它可以用来在鼠标悬停在某个元素上时改变该元素或其子元素、同级元素、相邻元素的样式 。hover 属性可以应用于任何元素,不仅仅是链接 。使用 hover 属性时,需要注意以下几点:

hover 属性必须放在 link 和 visited 属性之后,但在 active 属性之前,以便生效 。这是因为 css 的优先级是按照 LVHA(link-visited-hover-active)的顺序来确定的 。

在 IE浏览器中,除了 a 元素之外,其他元素要使用 hover 属性,必须声明 <!DOCTYPE>

在触摸屏上,hover 属性有问题,基本不可用。不同的浏览器对 hover 伪类的表现不同。可能从不会触发,或者在触摸某元素后触发了一小会儿,或者总是触发即使用户不在触摸了,直到用户触摸别的元素。因此,网页开发人员不要让任何内容只能通过悬停才能展示出来,不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。

hover 属性的语法如下:

1

2

3

4

:hover {

 

  /* css 声明 */

}

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)控制就近元素的样式 :

控制就近元素

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


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • CSS中的z-index属性介绍
    本文主要是对z-index属性进行详细的讲解,包括其使用场景、属性效果、适用范围等等。本博客的所有代码执行的浏览器环境,都是以Chrome浏
  • CSS中的hover属性使用方法介绍
    css 的 hover 属性是一种伪类选择器,它可以用来在鼠标悬停在某个元素上时改变该元素或其子元素、同级元素、相邻元素的样式 。hover 属性
  • CSS中外边距塌陷的八种解决方法
    margin-top塌陷是在CSS的盒子模型中出现的一种现象,描述的是当父元素包裹着一个子元素的时候,当给子元素设置margin-top属性时,此时只是想
  • 什么是clearfix (一文搞清楚css清除浮动clearfix)
    clearfix 是一种 CSS 技巧,可以在不添加新的 html 标签的前提下,解决让父元素包含浮动的子元素的问题。这个技巧的版本是很多的,最流行的
  • 如何利用css var函数让你的组件样式输出规范样式
    我们平时在使用Elementui Antdesing这些UI库时,难免会碰到使用deep强行侵入式去修改组件内部样式的情况;比如下列代码,我们需要把ant的分页
  • 纯CSS实现了下划线的交互动画效果

    纯CSS实现了下划线的交互动画效果
    最近看到了一个特别炫酷的网站上的一个小细节,下划线的动画。看下他的实现效果。 但是,假如我们左边并没有足够的空间存放一条不可
  • css动画实现节流的代码
    1、节流原理 如果持续触发事件,每隔一段时间只执行一次函数。意思就是针对调用频率高的函数,通过设置延时,使其在执行后间隔一段时
  • 五个惊艳一时的CSS属性的介绍(不常用但很有用

    五个惊艳一时的CSS属性的介绍(不常用但很有用
    随着前端的不断发展,更多新的CSS属性不断加入提案,本文列举 5 个不常用但很有用且你见过也可能没见过的CSS属性,带大家领略CSS之美。
  • 基于CSS实现元素融合效果

    基于CSS实现元素融合效果
    实现效果 完整源码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
  • 纯CSS实现loading加载中效果(多种展现形式)

    纯CSS实现loading加载中效果(多种展现形式)
    前言 现如今网页越来越趋近于动画,相信大家平时浏览网页或多或少都能看到一些动画效果,今天我们来做一个有意思的动画效果,纯css实
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计