:hover 实际选择的是子元素的原因

最新推荐文章于 2024-02-28 11:08:51 发布

原创最新推荐文章于 2024-02-28 11:08:51 发布 · 2.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端开发日记专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了 CSS 中 :hover 选择器的两种使用方式及其区别：一种用于选择带有悬停状态的元素本身，另一种则针对该元素的所有子元素。通过实例说明了这两种用法如何改变元素的背景颜色。

先看下面代码的区别

.myDiv :hover{//:hover前有空格
    background: blue;
  }
  .myDiv:hover{//:hover前没有空格
    background: blue;
  }

第一种:hover选择的是.myDiv的所有子元素，而第二种选择的是.myDiv本身。
第一种会将.myDiv的所有子元素的背景设为blue；
第二种会将.myDiv自己的背景设为blue。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jiang_mingyi

关注关注

7
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端CSS中“：hover”伪类选择器的使用

小蜗牛764号的博客

04-19

8314

在css中的:hover（悬停）伪类选择器，主要功能是我们用鼠标悬停在我们设置好的页面元素上时，用以触发我们设置的某一元素的属性效果。它不会改变原有的代码功能，但可以加强我们使用者的交互性。对一个超链接，如果我们鼠标悬停碰到它（移动鼠标碰到它），然后它出现了某种变化，如变大、变颜色等；或一个按钮，我们也用鼠标悬停碰到它的位置，原本方形变圆；又或者一张卡片，当鼠标悬停到它的位置时，它产生了阴影效果。网页有以上功能，这是不是可变得很有趣而丰富了呢？

3 条评论您还未登录，请先登录后发表或查看评论

【初入html常见问题】

wanyuwenrou的博客

11-27

337

在这几周的学习中我遇到了很多的问题，对此，我花了很多时间绞劲脑汁的想解决它们，或许解决过程十分的曲折漫长，但是当问题解决的时候那种难以言表的成就感和自豪是无可比拟的。在这过程中我总结了部分常见的问题。 hover：常搭配display：block使用，在使用中常出现悬浮后不显示的情况。可以将悬浮对象和需要显示的部件用一个容器包起来，利用display：none使部件隐藏。显示方法为：父标签：hover 子标签{display：block；}。在刚才的问题中父标签为容器，子标签为隐藏的部件，即可实现悬浮显示

CSS的hover属性控制其他元素失效问题

winner_ch的博客

05-07

2882

hover控制其他元素

关于CSS :hover选择器的用法（控制子元素样式、控制同级元素样式）

start_sea的博客

08-05

2万+

关于CSS :hover选择器的用法（控制子元素样式、控制同级元素样式） 1、hover定义： :hover 选择器用于选择鼠标指针浮动在上面的元素。提示：:hover 选择器可用于所有元素，不只是链接。注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。 2、支持的浏览器： 3、:hover控制自身样式： <div class="aa"></div> <style> aa:hover {

CSS中:hover选择器改变子元素、同级元素、就近元素的样式

qq_58626489的博客

02-28

2110

hover 选择器用于选择鼠标指针浮动在上面的元素。:hover 选择器适用于所有元素1. 中间什么都不加控制子元素；2. ‘+’ 控制同级元素(兄弟元素)；3. ‘～’ 控制就近元素；

css hover控制子元素、同级元素样式

weixin_42385932的博客

01-09

1319

关键：同级指标签必须在引用标签的后面，若是前面，则不起效果，需要使用js控制。

CSS: hover选择器控制子元素的出现和隐藏

祈澈菇凉

03-08

1万+

前两天不知道是哪位同学问的问题，鼠标滑过一个div的时候，怎么控制子集元素属性的出现和隐藏，然后我说用用mouseover和mouseout这两个鼠标事件就行，那如果js不怎么熟悉的时候，可以用CSS: hover方法来写吧。方法：使用a 控制其他块的样式：使用a控制a的子元素 b： .a:hover .b { ...

CSS :hover选择器的使用

脚印

06-28

1575

定义 :hover 选择器，用于选择鼠标指针浮动在上面的元素 :hover选择器适用于所有元素用法用法一 a:hover { background-color: yellow; } 效果：当鼠标悬浮在a元素上时，a的背景颜色设置为黄色用法二使用 a 控制其他块的样式 子元素 使用 a 控制 a 的子元素 b ： a:hover b { background-color:b...

css hover 控制其他元素_CSS:hover选择器的使用方法

weixin_39713686的博客

11-29

1万+

在CSS中有个hover属性，当鼠标移上去的时候可以将其激活，它可以用来实现类似于js的一些功能。以下是对:hover的用法介绍：定义和用法定义：:hover 选择器用于选择鼠标指针浮动在上面的元素。:hover 选择器适用于所有元素，不仅仅是链接。用法1：这个表示的是：当鼠标悬浮在a这个样式上的时候，a的背景颜色设置为黄色。这个是最普通的用法了，只是通过a改变了style。用法2：使用...

CSS: hover选择器的使用详解

tsang荒男的博客

01-09

1468

统一代码： <html> <body> <style> #a:hover {color : #FFFF00;} #a:hover > #b:first-child{color : #FF0000;} #a:hover > #b{color : #FF00FF;} #a:hover + #c{color : ...

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

weixin_42517317的博客

06-10

2万+

有些时候需要用到mouseover和mouseout这两个鼠标事件，但是写js又比较麻烦，还要添加监听事件，所以能用css解决的东西尽量yongcss解决，这样可以提高性能，下面说一下我对:hover 的了解:之前在学计算机应用的时候，老师教我们使用了:hover选择器来完成下拉菜单，之前只知道怎么使用，并不知道为什么要这么用，现在记下怎么使用吧定义和用法定义：:hover 选择器用于选择鼠标指针...

CSS的hover属性

Min_137的博客

09-13

3万+

hover的使用方法

【前端开发】CSS中的:hover伪类选择器你真的搞懂怎么去使用它吗？

极客小俊

01-29

8632

你到底会不会使用伪类:hover ?

选择器与:hover之间空格带来的影响

wyione的博客

05-03

525

讨论一下a:hover和选择器书写时，有空格和没空格的区别选择器与:hover有空格选择器与:hover没有空格总结用了三个父子级div来做试验 div>div>div HTML代码如下 <div class="grade-one"> 我是父级DIV标签 <div class="grade-two"> 我是二级DIV标签 <div ...

关于伪类选择器：hover的用法

a1871934508的博客

10-21

6159

前面，我们已经讲过了inuput标签的具体用法，那么今天，我们来介绍一下hover。 hover，伪类选择器，用于选择鼠标指针浮动在上面的元素。什么意思呢，就是比如这个元素原本是红色，那么鼠标指针悬停在那个内容上面，可以事先通过设定：hover更改背景色，然后变成蓝色、黄色、绿色，橙色等等等等…… 代码如下： html代码： <div id="div" style="background-...

css中hover属性的使用技巧

anjx0228的博客

08-12

3万+

hover属性用不同的书写方式，来改变不同关系的元素样式。元素:hover 表示聚焦后改变自己元素:hover 元素表示聚焦后改变其子元素 元素:hover + 元素表示聚焦后改变其指定的“亲兄弟”（条件是该兄弟元素与其相邻）元素元素:hover ~ 元素表示聚焦后改变其指定的兄弟元素，两个元素相不相邻都行。示例： .first:hover {color: white;}/* 聚焦我改变自己 */ .three:hover .three-son {font-size: 20px.

css选择器、hover伪类

cybcc的博客

01-21

9255

一.css选择器使用css选择器基本流程： 1.制作所需的选择器，并在其中写入样式。 2.将选择器绑定到指定的HTML标签上。 1）class选择器 class选择器：用 . 来标示自身，自定义名称(名字符合见名知意即可)。具有重用性，可以给多个标签使用。使用时，使用给对应的标签进行绑定例如 < div class=".box">< /div > 。 class...

html中hover的作用,hover在css中的作用是什么

weixin_31080717的博客

06-16

3000

hover在css中的作用是什么发布时间：2020-12-07 10:26:29来源：亿速云阅读：143作者：小新这篇文章给大家分享的是有关hover在css中的作用是什么的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。在css中，“:hover”选择器用于选择鼠标指针浮动在上面的元素，然后为其设置样式，语法格式“元素:hover{css样式};”；“:hover”必须位...

CSS: hover选择器的使用（实现鼠标悬浮效果，鼠标移上去div显示）