HTML网页布局里,鼠标放上去时,页面如何实现导航栏下面内容的切换(HTML+CSS网页布局) 20
如图所示,把鼠标分别放在“业界”、“视角”、“国家旅游局黄专区“时,底下的内容是不一样的。这种效果如何利用代码实现?如果有具体的代码演示,就最好不过了百度了一下,这叫【舌...
如图所示,把鼠标分别放在“业界”、“视角”、“国家旅游局黄专区“时,底下的内容是不一样的。这种效果如何利用代码实现?如果有具体的代码演示,就最好不过了
百度了一下,这叫【舌签效果】,也有人说叫【选项卡切换】。请问,如果不用JS和JQUERY,纯html+CSS代码能实现吗? 展开
百度了一下,这叫【舌签效果】,也有人说叫【选项卡切换】。请问,如果不用JS和JQUERY,纯html+CSS代码能实现吗? 展开
2个回答
展开全部
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>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询