CSS hover 同级元素

最新推荐文章于 2024-04-19 15:57:51 发布
最新推荐文章于 2024-04-19 15:57:51 发布
阅读量4.7k 收藏 2
点赞数 2
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shengjon/article/details/78050413
版权 

.child_head ul .senav:hover +.edit span{
   border-left: 1px solid transparent;
}


       默认情况下如果你想hover到一个元素上改变另外一个元素的CSS样式，被改变的元素必须是被hover元素的子元素，如果是兄弟关系，那么你必须要这样设置了。



shengjon
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3控制HTML元素动画效果
09-25
本文将详细讲解如何利用CSS3来控制HTML元素的动画，包括元素的变形、动画属性、多时间点控制以及如何通过hover动作触发其他元素的动画。 首先，我们来看一下元素的变形（transform）控制。在CSS3中，`transform`...
CSS: hover选择器的使用详解
09-24
3. **控制同级元素**: `.a:hover + .c`，这个选择器用于选取与`.a`元素相邻的同级元素`.c`，当鼠标在`.a`上时，改变`.c`的样式。 4. **控制后续兄弟元素**: `.a:hover ~ .d`，这个选择器选取`.a`之后的所有同级元素...
hover控制同级元素样式
qq_43654065的博客
12-23 931
1. 父子关系 .a:hover .b{color:red}; 2. 同级相邻元素 .a:hover + .b{color:red}; 3. 同级不相邻元素 .a:hover ~ .b{color:red}; ps: 1. 同级相邻或者不相邻都可以使用 ~； 2. 这里的同级指b标签必须在a的后面，若是前面，则不起效果，使用js控制。 ...
hover控制同级元素css样式
guanguan0_0的博客
12-09 4522
css中我们经常遇到hover态的样式处理，通常我们用的更多的是控制自身或者控制子元素，但是遇到同层级元素怎么处理呢？ 直接上一个很经典的例子，也是在项目中遇到的： 例子是一个图片预览控件，需求：当鼠标移动到可视区域内时显示左右切换按钮和下方的操作区，但是当用户左右切换图片时，我们发现如果按钮操作区一直处于显示状态会遮盖部分图片信息，严重影响用户体验。所以，当鼠标移动到左右切换按钮时，我们需要将按钮操作区隐藏 1、如果a是b的父元素，使用 #a:hover #b{ } 2、如果a和b是同级元素，
前端CSS中“：hover”伪类选择器的使用
最新发布
小蜗牛764号的博客
04-19 1799
在css中的:hover（悬停）伪类选择器，主要功能是我们用鼠标悬停在我们设置好的页面元素上时，用以触发我们设置的某一元素的属性效果。它不会改变原有的代码功能，但可以加强我们使用者的交互性。对一个超链接，如果我们鼠标悬停碰到它（移动鼠标碰到它），然后它出现了某种变化，如变大、变颜色等；或一个按钮，我们也用鼠标悬停碰到它的位置，原本方形变圆；又或者一张卡片，当鼠标悬停到它的位置时，它产生了阴影效果。网页有以上功能，这是不是可变得很有趣而丰富了呢？
hover操纵同级元素
weixin_45043158的博客
06-12 377
hover操纵同级元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hover操纵同级元素</title> <style> .first { color: #f99; }
html同级元素怎么控制,hover对同级兄弟元素以及子集元素的操作
weixin_39553776的博客
06-24 3758
兄弟级别的hover控制不使用JavaScript脚本，仅通过CSS来实现时有两种方法：若元素#b是元素#a的子元素，则可以通过#a #b{……}来控制#b的CSS样式。若#a与#b是亲兄弟关系，有相同的父节点，且#b紧跟在#a后面，则可通过#a + #b{……}来控制#b的CSS样式下面给出方法二的例子：例一Document#a {color : #99ff66;}#a:hover + #b{c...
css hover控制子元素、同级元素样式
weixin_42385932的博客
01-09 989
关键：同级指标签必须在引用标签的后面，若是前面，则不起效果，需要使用js控制。
使用CSS伪元素控制连续几个元素的样式方法
01-22
用CSS伪元素控制元素的时候经常性的需要改变一些元素的样式，网上有许多博客都说了如何去控制一个的改变，但是我在实际写的过程中，发现更多时候是需要控制多个连续元素的改变。 使用伪元素去控制（以:hover为例），...
CSS基础完整版深度解析
06-20
此外，CSS还支持更高级的选择器，如伪类（`:hover`，`:active`，`:focus`等）和伪元素（`::before`，`::after`等），以及更复杂的组合和层叠规则。 了解和熟练掌握这些基础概念是CSS学习的第一步。随着技能的提升，...
CSS选择器学习攻略
09-24
- `E + F` 毗邻元素选择器，如`p + p`，选择所有紧跟在`p`元素后的同级`p`元素。 3. **CSS 2.1 属性选择器**： - `E[att]` 选择所有具有`att`属性的`E`元素。 - `E[att=val]` 选择`att`属性等于`val`的`E`元素。...
css hover同级,CSS hover改变子标签/同级标签样式
weixin_29001655的博客
08-03 1444
.second {display: none;}.first:hover+.second, .second:hover {display: block;}/*第一个div hover时，改变其子标签的颜色*/.first:hover .first-child {color: cyan;}/*第一个div hover时，改变第二个div标签的颜色*/.first:hover + .second {c...
css省略号
故里的博客
11-30 578
1.一行省略 .a-line{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 或者 .a-line{ overflow: hidden; text-overflow: ellipsis; display: box; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orien
鼠标进过 如何让同级的元素显示出来
xieting153的博客
09-10 1031
代码如下 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;测试&lt;/title&gt; &lt;style&gt; #mysteve {width:200px;
css 获取前后同级兄弟元素的方法
jiangjunyuan168的博客
12-11 5557
获取后面的兄弟元素相较于获取前面的兄弟元素来说更简单点，这是浏览器 流布局 所决定的（元素...
CSS:hover常见问题及用法
qq_54334713的博客
04-12 9532
目录 hover定义 hover用法 hover问题 后记 hover定义 :hover 选择器用于选择鼠标指针浮动在上面的元素 hover用法 控制自身样式 <div class="aa"></div> <style> aa:hover { background-color:yellow; } </style> 父元素控制子元素 <div class="parent"> <div cl
CSS hover 父对子、子对父、同级之间的控制
青春不打烊的博客
11-23 3947
1.父元素控制子元素。2.子元素控制父元素。
用hover操纵同级元素
一个半路出家的人
08-14 1万+
通过+号来操纵同级元素 只能操纵相邻的兄弟元素,也可操纵相邻同级元素的子元素 不相邻的同级元素不能操纵 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;hover操纵同级元素&lt;/
css元素hover時控制另一个元素的显示隐藏
热门推荐
u011511086的专栏
11-30 6万+
css元素hover時控制另一个元素的显示隐藏
css中:hover同级元素
08-23
如果你想选择:hover 同级元素，可以使用兄弟选择器（~）或者相邻兄弟选择器（+）。 兄弟选择器（~）可以选择同级的所有元素，无论它们在被选择的元素之前还是之后。例如，如果你想选择鼠标悬停在某个元素上时它之后...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值