小细节：一个空格让hover变了味——选到了子类

最新推荐文章于 2024-02-28 11:08:51 发布
最新推荐文章于 2024-02-28 11:08:51 发布
阅读量199 收藏 1
点赞数 3
分类专栏： 小细节 js 文章标签： hover css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rear0312/article/details/107519360
版权

想给层添加hover事件

可是却是它子的div有了hover效果

真的让我很无语，秉着事出反常必有妖的捉妖师态度，顺藤摸瓜，还真是有问题：

参考链接：:hover 实际选择的是子元素的原因

                  CSS :hover选择器的使用

仅仅是一个小空格的原因

改过之后就实现了想要的效果

以前真的没有注意到这个小细节，遇到了记一下

菜鸟茜
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
选择器与:hover之间空格带来的影响
wyione的博客
05-03 435
讨论一下a:hover和选择器书写时，有空格和没空格的区别选择器与:hover有空格选择器与:hover没有空格总结 用了三个父子级div来做试验 div>div>div HTML代码如下 <div class="grade-one"> 我是父级DIV标签 <div class="grade-two"> 我是二级DIV标签 <div ...
javascript将字符串中的多个空格替换为一个空格的正则实例
10-20
主要介绍了javascript将字符串中的多个空格替换为一个空格的正则实例,需要的朋友可以参考下
hover内部指定子类的样式
weixin_45221036的博客
01-29 441
hover内部指定子类的样式 如下图：想要实现的是鼠标hover在外部容器上，其子元素变化不同的样式。 上代码：（css的hover内部还可以进行写选择器来写对应的子元素样式） .ant-steps-item-container {// 外部容器 &:hover { .ant-steps-item-icon {// 整个圆圈⭕️ background-color: #1890ff; transition: all 0.3s; .ant-steps-i
css中：hover空格
weixin_34217773的博客
09-05 179
前面有空格后代所有节点，前面无空格第一个节点 <div class="task-item"> <span><input type="checkbox"></span><span class="taskcontent">a</span> <span class="anchor"> delete</span...
：hover如何选中多个子元素添加不同效果
weixin_52808469的博客
03-01 435
通过后代选择器选中然后添加样式。就可以同时添加样式了。
空格对a:hover的影响
qq_43654065的博客
09-30 346
1. 在hover的冒号前加空格 div a :hover{background-color:red} 如上表示div内a标签包含的子标签在hover时是红色。 2. hover的冒号前不加空格 div a:hover{background-color:red} 表示div内所有a标签在hover时是红色。
C#字符串中去除多余的空格保留一个的实例
08-28
当我们遇到一个字符串，其中包含了多个连续的空格，并且希望只保留一个空格时，可以使用特定的方法来实现这一需求。本篇文章将深入探讨如何在C#中去除字符串中的多余空格并仅保留一个。 首先，我们要理解问题的核心...
微信小程序中换行空格（多个空格）写法详解
08-27
”，后面跟着大约四个空格，然后换行到下一行显示“七月流火啊！”，再换行显示“我在下一行”。 2. **连续空格**： - 对于连续空格的需求，微信小程序提供了特殊的属性`space`，可以设置为`ensp`(半角字符宽度)、...
nossa:防止空格作为输入字段和文本字段的第一个字符
05-23
但是有一块遗失的东西。 尽管用户将无法提交在必填字段中未输入任何内容的表单，但可以通过点按空格键来绕过空白字符进行验证。 NOSSA是“不允许使用任何起始空间”的缩写，它通过确保所有输入和textareas值都不...
【原创】css父类hover 子类感应出效果
weixin_34144848的博客
09-08 1154
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS中:hover选择器改变子元素、同级元素、就近元素的样式
最新发布
qq_58626489的博客
02-28 1158
hover 选择器用于选择鼠标指针浮动在上面的元素。:hover 选择器适用于所有元素1. 中间什么都不加 控制子元素；2. ‘+’ 控制同级元素(兄弟元素)；3. ‘～’ 控制就近元素；
:hover 实际选择的是子元素的原因
jiang_mingyi的博客
10-24 2080
先看下面代码的区别.myDiv :hover{//:hover前有空格 background: blue; } .myDiv:hover{//:hover前没有空格 background: blue; }第一种:hover选择的是.myDiv的所有子元素，而第二种选择的是.myDiv本身。 第一种会将.myDiv的所有子元素的背景设为blue； 第二种会将.myDiv
CSS中hover改变子元素和其它元素样式
热门推荐
Baron技术博客
08-27 3万+
#a {color : #FFFF00;} #a:hover + #c{color : #00FF00;} #a:hover + #c > #b{color : #0000FF;} 元素1 元素3 元素2 +表示下一级元素，>表示子元素
hover前有无空格的区别
DyP__CSDN的博客
09-07 376
hover前加不加空格的区别 问题描述 在使用hover时开始没有注意空格的影响，以至于达不到理想的样式，后通过学习发现hover前加不加空格是有区别的。 不加空格 .card:hover{ cursor:pointer; color:#44aaee; box-show: 0px 1px#44aaee; } 展现样式 如图所示，hover没加空格影响的只是class为card的元素，而里面的元素不受影响 加空格 .card :hover{ cursor:pointer; color:#44aa
如果设置了标签的hover后，如何设置a标签下的某个子标签的hover
qq_42408149的博客
09-11 3299
可以用后代子类 ，就可以设置后代子类标签的hover，直接用后代不用再写hover例如
js获取当前月、上一月和下一月
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
06-23 1万+
获得当前月/上一月/下一月
Uncaught TypeError: search is not a function at HTMLAnchorElement.onclick (airport.do:70)
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
09-26 4880
页面a标签的click事件 查询 于是页面就一直报错，我原来以为是search方法写的有问题，可是页面的onload的事件也是触发的search方法， 最后百度，改了下js对应得方法名称就可以了，像search、download是关键字，所以js方法的名字最好别这样设置！ 查询
vue+Element实现文字列表轮番滚动效果
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
05-22 4317
<template> <div style="position: relative;"> <p class="spans"><img src="../../assets/img/block-title-icon.png" alt=""><span class="tit">预警信息</span></p> <div v-if="!chuxians" ref="message" class="message.
Quill编辑器实现图片上传功能
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
05-20 4014
我们引入Quill时是可以直接插入图片了，但是是Quill将图片转化成了base64格式，我们如果存数据库的话，肯定不是长久之计，而真正符合我们要求的便是图片上传之后返回图片路径，再插入图片 1、点击图片小图标触发handler事件 2、监听图片选择框的imgChange事件实现图片上传 代码标红点是需要注意的，之前总是能上传成功，但是我insert的时候图片总是显示不出来，但是如果require一个已经存在的图片就可以正确显示，我感觉应该是异步造成的，因此设置了一个延时setTime
编译原理：状态图详解与算法实现——从词法到代码优化
本资源主要介绍编译原理中状态图的实现...这是一份关于编译原理课程的详细资料，通过实例演示了状态图在词法分析中的应用，并深入探讨了编译系统的多个核心环节。对于学习编译原理的学生来说，这是一份宝贵的学习资源。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菜鸟茜

随多随少随你心意^-^

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值