HTML网页布局里,鼠标放上去时,页面如何实现导航栏下面内容的切换(HTML+CSS网页布局) 20

如图所示,把鼠标分别放在“业界”、“视角”、“国家旅游局黄专区“时,底下的内容是不一样的。这种效果如何利用代码实现?如果有具体的代码演示,就最好不过了百度了一下,这叫【舌... 如图所示,把鼠标分别放在“业界”、“视角”、“国家旅游局黄专区“时,底下的内容是不一样的。这种效果如何利用代码实现?如果有具体的代码演示,就最好不过了
百度了一下,这叫【舌签效果】,也有人说叫【选项卡切换】。请问,如果不用JS和JQUERY,纯html+CSS代码能实现吗?
展开
 我来答
Baby_原來
推荐于2017-07-19 · TA获得超过3402个赞
知道大有可为答主
回答量:1535
采纳率:94%
帮助的人:498万
展开全部

1、利用css的:hover

<div id="content">  
    这是原本的div层  
    <div id="show">  
        <p>这是鼠标移动上去后的div层</p>  
    </div>  
</div> 
<style type="text/css">  
        *{  
            margin: 0;  
            padding: 0;  
        }  
        #content{  
            background:#0CF;  
            height:200px;  
            width:200px;  
            margin-left: 20px;  
            margin-top: 20px;  
        }  
        #show{  
            width:200px;  
            height:200px;  
            margin-top: 20px;  
            background:#F09;  
            top:0px;  
            position:absolute;  
            opacity: 0;  
            display: block;  
            font-size: 12px;  
            transition: 0.3s;  
            -webkit-transition: .5s;  
            -moz-transition: .5s;  
        }  
        #content:hover #show{  
            color: #656e73;  
            opacity: 1;  
        }  
    </style>
慕刓辞
2015-12-07 · 知道合伙人软件行家
慕刓辞
知道合伙人软件行家
采纳数:583 获赞数:1704
从事前端开发4年,喜欢专研H5各种网页效果!

向TA提问 私信TA
展开全部
最简单的就是你写三个切换标签,定位好,然后再在下面写三个div,每个div包含一个标签的内容,默认第一个显示,其他两个隐藏,然后通过js来移动到第一个标签上显示第一个div的内容,后面一样
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式