css之hover改变另外一个元素的状态

以前也遇到过hover一个元素,显示或者隐藏另一个元素的场景,如果是父子元素关系,这种非常好写,在选择器后加一个空格,跟上另一个选择器就行了,
例如
classA:hover classB{
display:none;
}

但是有时不是父子元素关系,加空格就不行,以前都时用less这种css预处理语言写的,稀里糊涂就出效果了,这次用styus,非常不习惯,遇到这样一个场景,元素是兄弟关系,用老写法不出效果
于是查了查,发现原生css是用到了css3的兄弟选择器
classA: hover+classB{
display:none;
}
生效
---------------------
作者:qingzhizhenhun
来源:CSDN
原文:https://blog.csdn.net/qingzhizhenhun/article/details/79639740?utm_source=copy
版权声明:本文为博主原创文章,转载请附上博文链接!

原文地址:https://www.cnblogs.com/voiceangel/p/9780842.html

时间: 2024-11-13 03:28:08

css之hover改变另外一个元素的状态的相关文章

css基础 :hover 鼠标放在父元素上,子元素变色

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

【CSS】一个元素同时使用多个类选择器(class selector)

CSS类选择器参考手册 一个元素同时使用多个类选择器 CSS中类选择器用点号表示.实际项目中一个div元素为了能被多个样式表匹配到(样式复用),通常div的class中由好几段组成,如<div class="user login">能被.user和.login两个选择器选中.如果这两个选择器中有相同的属性值,则该属性值先被改为.user中的值,再被改为.login中的值,即重复的属性以最后一个选择器中的属性值为准.测试如下: <style> .user { fo

jQuery判断当前元素显示状态并控制元素的显示与隐藏

1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible');   //true为显示,false为隐藏 $("#id").is(':hidden');   //true为隐藏,false为显示 if($("#id").is(':hidden')){ //逻辑代码 } 2.jQuery控制css的display $("#id").show();    //表示display:block $

css实现菜单栏效果以及用hover属性去控制另一个元素样式的问题

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动</title> <style type="text/css"> *{ margin: 0; padding: 0; } .one{ text-decoration: none; color:red; font-size: 20px; /*position: r

[css]《css揭秘》学习(四)-一个元素实现内圆角边框

如图所示的圆角边框有两个元素很好实现,用一个元素也可以实现. 1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>灵活的背景定位2</title> 5 <style type="text/css"> 6 div{ 7 max-width: 10em; 8 border-radius: .8em; 9 padding: 1em; 10 margi

动态数组,数组初始化,数组内存释放,向数组中添加一个元素,向数组中添加多个元素,数组打印,顺序查找,二分查找,查找数组并返回地址,冒泡排序,改变数组中某个元素的值,删除一个数值,删除所有,查找含有

 1定义接口: Num.h #ifndef_NUM_H_ #define_NUM_H_ #include<stdio.h> #include<stdlib.h> /************************************************************************/ /*数组的结构体类型                                                    */ /*******************

浅谈css中一个元素如何在其父元素居中显示

css如何垂直居中一个元素的问题已经是一个老生常谈的问题了.不管对于一个新手或者老手,在面试过程中是经常被问到的.前两天在看一个flex的视频教程,当中提到了有关元素的居中问题,所以今天小编就来扒一扒几种常见的方式.不足之处请大家批评指正(所有的代码都是自己亲手敲过可用的) 1.水平居中(margin:0 auto;) 关于这个,大家应该是最不陌生的,不管是在培训班还是自己自学的话 .这个应该是老师讲的第一个方法了(水平方向上),但是其有一个前提,就是被包裹的元素不能有浮动的属性.否则的话这个属

DOM设置下一个元素的CSS样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS-DOM</title> <script src="addLoadEvent.js"></script> <link rel="stylesheet" type="text

关于html与css中隐藏一个元素的几种方法

1,将元素的display属性设为none <div style="display:none">看不见我</div> 2,<input>标签元素的type属性设为hidden <input type="hidden" name="看不见我"> 3,将元素的width和heigth都设为0 <div style="width:0:heigth:0:background-color:re