hover前有无空格的区别

最新推荐文章于 2024-04-09 19:48:01 发布
最新推荐文章于 2024-04-09 19:48:01 发布
阅读量410 收藏 1
点赞数
分类专栏： 前端问题总结 文章标签： hover空格的影响 hover有无空格的区别 hover 空格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DyP__CSDN/article/details/120152379
版权
本文探讨了CSS中`.card:hover`选择器在使用时加不加空格的区别。不加空格的情况下，hover样式仅影响class为card的元素自身，而加空格则会影响该class下的所有子元素。了解这一细节对于精确控制元素的样式至关重要。
摘要由CSDN通过智能技术生成

hover前加不加空格的区别

问题描述
在使用hover时开始没有注意空格的影响，以至于达不到理想的样式，后通过学习发现hover前加不加空格是有区别的。

不加空格

.card:hover{
	cursor:pointer;
	color:#44aaee;
	box-show: 0px 1px#44aaee;
}

展现样式
在这里插入图片描述
如图所示，hover没加空格影响的只是class为card的元素，而里面的元素不受影响

加空格

.card :hover{
	cursor:pointer;
	color:#44aaee;
	box-show: 0px 1px#44aaee;
}

展示样式
在这里插入图片描述
如图所示，class为card元素不受hover样式影响，但是class为card的元素下的元素都受hover样式影响

结论
加空格：影响该class之下的元素
不加空格：影响为该class的元素

DyP__CSDN
关注
专栏目录
选择器与:hover之间空格带来的影响
wyione的博客
05-03 441
讨论一下a:hover和选择器书写时，有空格和没空格的区别选择器与:hover有空格选择器与:hover没有空格总结 用了三个父子级div来做试验 div>div>div HTML代码如下 <div class="grade-one"> 我是父级DIV标签 <div class="grade-two"> 我是二级DIV标签 <div ...
Hover的小细节IntelJ2021.1.3/css3
zhasodhaoudhowud的博客
07-24 206
hover作用对象是所有elements，可以是div，也可以是.div，如果你想混用，我只能说你太调皮。 :冒号前有空格，hover只作用于后代，除了本身。 div :hover { color:tomato; } Hover后面加空格，再加对象可以作用到任意后代， <div class="father">it is not ture <div1 class="bro1"><br>you fullish</br></div1&g..
标签名与：hover前是否有空格
lg7955的博客
02-18 353
#submitPassed:hover{ box-shadow: 0 1px 2px -2px rgb(0 0 0 / 16%), 0 3px 6px 0 rgb(0 0 0 / 12%), 0 5px 12px 4px rgb(0 0 0 / 9%); } 不加空格，影响的是自身或其他相邻兄弟元素， 写的是一个划过出现盒阴影效果 #submitPassed :hover { box-shadow: 0 1px 2px -2px rgb(0 0 0 / 16%), 0 .
:hover前面有空格和没有空格有不一样的效果
weixin_30298497的博客
05-28 173
最近在写一些html样式发现:hover前面有空格和没有空格有不一样的效果，:hover前面没有空格，影响的只是该元素的兄弟节点；但是，如果前面有了一个空格，那效果就大大不一样了，有个空格影响的就是 该元素下面的 子节点了。 实例： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4...
css的:hover前面有无空格的问题
qq_20337865的专栏
12-11 562
:hover前面没有空格 影响的只是该元素的兄弟节点； 效果如下 :hover前面有了一个空格 影响的就是 该元素下面的 子节点 效果如下 子节点都会响应处理这个hover ...
css中：hover空格
weixin_34217773的博客
09-05 186
前面有空格后代所有节点，前面无空格第一个节点 <div class="task-item"> <span><input type="checkbox"></span><span class="taskcontent">a</span> <span class="anchor"> delete</span...
CSS的基础知识点（下）
m0_59030524的博客
11-15 544
1. CSS 的复合选择器 1.1后代选择器 (重要） 后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代  元素1 和 元素2 中间用空格隔开  元素1 是父级，元素2 是子级，最终选择的是元素2  元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可  元素1 和 元素2 可以是任意基础选择器 1.2子选择器 (重要） 子元素选择器（子选择器）只能选择作..
sass/scss学习笔记
poorguy_aos的博客
12-05 558
简介 scss/sass是css的超集，类似与typescript和JavaScript的关系，最终将转换为css上线,其语法格式有scss和sass(使用“缩进”代替“花括号”)两种 本笔记仅参考了中文网中的快速入门和中文文档两个部分，更详细的请参考英文版api 注释 多行注释/* */会被编译到css中，单行注释//则不会 带!号的多行注释 /*! 版权信息 */ 通常用于加入版权信息，在处于压缩模式的css下也不会被删除 变量 变量以美元符号开头，赋值方法与 CSS 属性的写法一样 $width
<CSS设计指南> 学习总结 -- 第一二章
lihei12345的专栏
02-10 784
非文本内容是通过自闭和标签显示的。闭合标签与自闭和标签的区别在于，闭合标签包含的是会显示的实际内容，而自闭合标签只是给浏览器提供一个对要显示内容的引用。浏览器会在HTML页面加载的时候，额外向服务器发起请求，以取得自闭合标签引用的内容。在XHTML标准中，严格规定所有的标签都必须闭合，但HTML5标准在这方面则要宽松的多。换句话说，在HTML5网页里，某些闭标签是可以省略不写的。 是一个列表项，
Scss----运算和语法
qac的博客
12-14 3515
2020.12.14 06:30 Scss01.数字运算符02.关系运算符03.相等运算符04.布尔运算符05.颜色值运算06.运算优先级 01.数字运算符 SS支持数字的加减乘除、取整等运算(+, -, *, /, %) 如果必要会在不同单位间转换值 如果要保留运算符号，则应该使用差值语法 加+ 纯数字 $add1: 1 + 2; ==> 3 $add2: 1 + 2px;==> 3px $add3: 1px + 2;==> 3px $add4: 1px + 2px;==>
CSS中hover前有无空格的区别总结
pon的博客
05-20 177
使用:hover样式，若写法为： .btn:hover{ background:red; } 此时，hover的作用域为该btn类的元素 若写法为： .btn :hover{ background:red; } 此时，hover的作用域为该btn类下的所有子元素
空格对a:hover的影响
qq_43654065的博客
09-30 360
1. 在hover的冒号前加空格 div a :hover{background-color:red} 如上表示div内a标签包含的子标签在hover时是红色。 2. hover的冒号前不加空格 div a:hover{background-color:red} 表示div内所有a标签在hover时是红色。
[错误记录]伪元素和伪类选择器之前不加空格
wusandaofwy的博客
07-22 290
伪元素和伪类选择器之前不加空格
CSS实现鼠标滑过卡片上浮效果
no_waw的博客
04-28 3683
CSS实现鼠标滑过卡片上浮效果
CSS实现卡片在鼠标悬停时突出效果
最新发布
肖潇不写代码
04-09 950
你可以根据自己的需求调整背景颜色、边框、阴影等样式属性，以达到突出卡片的效果。同时，也可以通过JavaScript来添加更复杂的交互效果。下面是一个简单的例子，展示了如何通过CSS为卡片添加悬停效果（没咋学过前端，凑合用吧）选择器，你可以定义鼠标悬停在元素上时元素的样式，比如改变颜色、背景、字体等。伪类选择器用于指定当鼠标指针悬停在某个元素上时，该元素的状态变化。伪类可以增强用户与网页的交互体验，让用户在视觉上能够感受到操作的反馈。在CSS中，实现卡片在鼠标悬停时突出，通常使用。
卡片翻转效果的实现思路
Bunny的博客
10-17 702
这意味着该类中的元素将具有 500 像素的透视效果。透视效果使得元素在视觉上具有远近感，离观察者越近的元素看起来越大，离观察者越远的元素看起来越小。元素背面朝向前面，当鼠标悬停时，通过旋转使其正面朝向前面，从而呈现卡片翻转的动画效果。用于创建一个 3D 场景，控制元素在该场景中的视角和深度感。它定义了观察者与元素之间的距离，从而影响元素的透视效果。通过设置透视效果，可以在一些 3D 转换中产生更真实的效果，例如在鼠标悬停时翻转卡片。元素的 Y 轴，实现卡片翻转的效果。属性来实现，增强了翻转效果的真实感。
CSS:hover常见问题及用法
qq_54334713的博客
04-12 9586
目录 hover定义 hover用法 hover问题 后记 hover定义 :hover 选择器用于选择鼠标指针浮动在上面的元素 hover用法 控制自身样式 <div class="aa"></div> <style> aa:hover { background-color:yellow; } </style> 父元素控制子元素 <div class="parent"> <div cl
社交卡悬停（social card Hover）
知屋安砖
03-03 622
社交卡悬停示例HTMLCSS 示例 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Box box box...
hovercard头像悬浮卡效果
weixin_33739646的博客
06-26 527
2019独角兽企业重金招聘Python工程师标准>>> ...
hover改变前一个兄弟元素
06-10
在CSS中，可以使用“~”选择器来选取某个元素的所有前面的兄弟元素，然后使用:hover伪类来实现鼠标悬浮时的样式变化。例如，下面的代码可以实现鼠标悬浮时，前面的兄弟元素改变颜色： ``` /* HTML代码 */ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值