郑州网站优化

,郑州seo,郑州百度优化,郑州网络推广,选择路普科技,15年为企业网站优化助力!


您当前位置:首页 > 营销百科 > 网站建设知识 >

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

发布时间:2018-05-16 标签: 浏览量:

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 ;
}


版权声明:本站部分文章,由 郑州路普科技整理发表(信息来自互联网,不代表本站观点),如有冒犯请联系我们
网页标签:
服务城市
欢迎致电或者QQ咨询路普公司,我们专注企业网站优化服务!
提供网站优化、关键词排名、企业网站优化、SEO整站优化、站内站外优化等网站优化服务!

电话:0371-87535353
地址:郑州市花园路59号21世纪新楼中楼1#8001 豫ICP备10210721号-4
郑州网站优化,郑州网站优化公司,郑州关键词优化,郑州关键词排名,郑州百度优化专业的网络公司,助力企业快速提升目标客户转化率