鼠标悬浮控制元素隐藏与显示 - css中鼠标的hover状态

需求：当鼠标移动到一个元素A身上时，另外一个元素B显示。
实现原理：

A元素与B元素有一个相同的父级。
B元素默认隐藏，A元素默认显示。
当鼠标移动到A元素身上时，也可以看做是移动到了A元素的父级身上。A元素的父级获得一个鼠标的hover状态。
css使用： .father:hover .b { display:block } 的方式，来定义鼠标移动到父级身上时，B元素的样式。

html的示例代码：

<div class="father"><div class="brother-showing">....<div><div class="element">.....</div>
</div>

以上示例代码，仅仅示意了基本的html结构，实际之中是使用div还是span或者其他的标签，要视情况而定。

css代码：

.element{display:none; //元素默认是隐藏的
}//当鼠标经过兄弟元素brother-showing时，也就是经过父级father的时候。父级获得hover状态，在父级hover的基础上写element的样式：
.father:hover .element{display:block ;
}

鼠标悬浮控制元素隐藏与显示 - css中鼠标的hover状态相关推荐

html中鼠标悬浮显示与隐藏,css鼠标悬浮控制元素隐藏与显示
在网页开发中经常有需求是鼠标移动到一个元素A身上时,另外一个元素B显示. 如下图当鼠标移到图片上时,相关的描述从下方显示出来. css实现原理与情景: A 是 B 的父元素 B 默认隐藏 B{opa ...
js控制元素隐藏和显示
方法一: document.querySelector("#id").style.visibility="hidden";document.querySelec ...
微信小程序通过点击按钮控制元素隐藏与显示
目录一.效果图: 二.代码 js: wxml: 一.效果图: 二.代码 js: Page({data:{hidden:false, }, // 隐藏yincang:function(e){setTi ...
vue 电梯导航制作（鼠标滚动控制导航栏的显示与隐藏）
鼠标滚动控制导航栏的显示与隐藏上图先看效果: 下面为2张图,默认为导航栏,当鼠标向下滚动一定距离时,变为箭头, 并且点击黄色的返回图标,也变为下方箭头,此时再滚动窗口,不会变为导航栏. 点击下方箭头 ...
利用JS实现悬浮导航的隐藏和显示
利用JS实现悬浮导航的隐藏和显示 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工 ...
javascript控制元素隐藏的方法
javascript控制元素隐藏的方法是: 设置元素style属性中的display: 例如[var t = document.getElementById('test'); t.style.disp ...
Bootstrap—点击按钮控制div隐藏和显示的切换（图文详情）
Bootstrap-点击按钮控制div隐藏和显示的切换第一步:bootstrap有一个open类用来控制隐藏和显示,动态获取open是true还是false,并且点击按钮让toggle的true和f ...
css隐藏状态,CSS元素隐藏和显示
动态的隐藏和显示: // 隐藏元素 document.getElementById("div").style.visibility = "hidden"; // ...
在vue项目中使用v-show控制元素隐藏导致swiper的轮播图及分页无法正常显示
一.需求问题在之前的项目开发中,使用了swiper插件.由于是vue项目,对于swiper的轮播图我们使用了v-show命令,进行动态隐藏与显示.只有当点击进行一些操作以后,swiper的轮播图才会 ...

鼠标悬浮控制元素隐藏与显示 - css中鼠标的hover状态

鼠标悬浮控制元素隐藏与显示 - css中鼠标的hover状态相关推荐

最新文章

热门文章