网站建站,网站优化,小程序开发,APP软件开发,网络营销推广

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

网站优化 韩非 4005℃ 0评论

hover问题:hover不起作用,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 ;
}

转载请注明:北京SEO优化整站网站建设-地区专业外包服务韩非博客 » 鼠标悬浮控制元素隐藏与显示-css中鼠标的hover状态

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址