纯CSS实现多个display:none到display:block切换
CSS:.vip_level{width:400px;float:left;padding:5px;margin-left:10px;margin-top:10px;po...
CSS:
.vip_level{width:400px;float:left;padding:5px;margin-left:10px;margin-top:10px;position:relative;}
.vip_level label input {cursor: pointer;left: 13px;position: absolute; top: 27px;}
.vip_level label {background: none repeat scroll 0 0 #fff;color: #000000; cursor: pointer; display: inline-block; font: 12px/1.25 "Lucida Sans Unicode","Lucida Grande","Arial",sans-serif;
margin-right: 10px;min-height: 50px;padding: 12px 24px 12px 24px;position: relative; text-align: center; text-decoration: none; vertical-align: top; width: 125px;}
.border-5 {border-radius: 5px 5px 5px 5px;}
.float{ position:absolute;left:96px; top:15px; width:125px; border:1px solid #CCC; background-color:#FFF; padding:2px; display:none; z-index:1;}
.float2{ position:absolute;left:96px; top:15px; width:125px; border:1px solid #CCC; background-color:#FFF; padding:2px; display:none; z-index:2;}
.float3{ position:absolute;left:96px; top:15px; width:125px; border:1px solid #CCC; background-color:#FFF; padding:2px; display:none; z-index:3;}
.float4{ position:absolute;left:96px; top:15px; width:125px; border:1px solid #CCC; background-color:#FFF; padding:2px; display:none; z-index:4;}
div:hover .float,.float:hover{ display:block;}
div:hover .float2,.float2:hover{ display:block;}
___________________________________________________
HTML:
<div class="vip_level">
<label class="border-5">
<input type="radio" name="choose_vip" value="level_1" />
<a href="#"><img src="images/vip_level1.png" alt="银牌会员" /></a>
<div class="float">
随便的一些说明文字
</div>
<h2>银牌会员</h2>
</label>
<label class="border-5">
<input type="radio" name="choose_vip" value="level_2" />
<a href="#"><img src="images/vip_level2.png" alt="金牌会员" /></a>
<div class="float">
随便的一些说明文字
</div>
<h2>金牌会员</h2>
</label>
</div>
现在的效果是鼠标移上去两个图片的DIV=FLOAT文字都出来，能否实现移上去哪个出来哪个图片对应的DIV=FLOAT(也就是当第一个图片的display:block时，第二个display:none;而不是同时为display:block) 展开
.vip_level{width:400px;float:left;padding:5px;margin-left:10px;margin-top:10px;position:relative;}
.vip_level label input {cursor: pointer;left: 13px;position: absolute; top: 27px;}
.vip_level label {background: none repeat scroll 0 0 #fff;color: #000000; cursor: pointer; display: inline-block; font: 12px/1.25 "Lucida Sans Unicode","Lucida Grande","Arial",sans-serif;
margin-right: 10px;min-height: 50px;padding: 12px 24px 12px 24px;position: relative; text-align: center; text-decoration: none; vertical-align: top; width: 125px;}
.border-5 {border-radius: 5px 5px 5px 5px;}
.float{ position:absolute;left:96px; top:15px; width:125px; border:1px solid #CCC; background-color:#FFF; padding:2px; display:none; z-index:1;}
.float2{ position:absolute;left:96px; top:15px; width:125px; border:1px solid #CCC; background-color:#FFF; padding:2px; display:none; z-index:2;}
.float3{ position:absolute;left:96px; top:15px; width:125px; border:1px solid #CCC; background-color:#FFF; padding:2px; display:none; z-index:3;}
.float4{ position:absolute;left:96px; top:15px; width:125px; border:1px solid #CCC; background-color:#FFF; padding:2px; display:none; z-index:4;}
div:hover .float,.float:hover{ display:block;}
div:hover .float2,.float2:hover{ display:block;}
___________________________________________________
HTML:
<div class="vip_level">
<label class="border-5">
<input type="radio" name="choose_vip" value="level_1" />
<a href="#"><img src="images/vip_level1.png" alt="银牌会员" /></a>
<div class="float">
随便的一些说明文字
</div>
<h2>银牌会员</h2>
</label>
<label class="border-5">
<input type="radio" name="choose_vip" value="level_2" />
<a href="#"><img src="images/vip_level2.png" alt="金牌会员" /></a>
<div class="float">
随便的一些说明文字
</div>
<h2>金牌会员</h2>
</label>
</div>
现在的效果是鼠标移上去两个图片的DIV=FLOAT文字都出来，能否实现移上去哪个出来哪个图片对应的DIV=FLOAT(也就是当第一个图片的display:block时，第二个display:none;而不是同时为display:block) 展开
展开全部
纯CSS实现tab切换：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS_Tab</title>
<style type="text/css">
body{margin:0; font-size:12px; background:#666;}
#box{width:400px; height:300px; margin:100px auto 0;}
#tab_nav{margin:0; padding:0; height:25px; line-height:24px;}
#tab_nav li{float:left; margin:0 3px; list-style:none; border:1px solid #999; border-bottom:none; height:24px; width:60px; text-align:center; background:#FFF;}
a{font:bold 14px/24px "微软雅黑", Verdana, Arial, Helvetica, sans-serif; color:green; text-decoration:none;}
a:hover{color:red;}
#tab_content{width:398px; height:273px; border:1px solid #999; font:bold 4em/273px "微软雅黑", Verdana, Arial, Helvetica, sans-serif; text-align:center; background:#FFF; overflow:hidden;}
#t_1,#t_2,#t_3{width:100%; height:273px;}
</style>
</head>
<body>
<div id="box">
<ul id="tab_nav">
<li><a href="#t_1">tab_1</a></li>
<li><a href="#t_2">tab_2</a></li>
<li><a href="#t_3">tab_3</a></li>
</ul>
<div id="tab_content">
<div id="t_1">tab_壹</div>
<div id="t_2">tab_贰</div>
<div id="t_3">tab_叁</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS_Tab</title>
<style type="text/css">
body{margin:0; font-size:12px; background:#666;}
#box{width:400px; height:300px; margin:100px auto 0;}
#tab_nav{margin:0; padding:0; height:25px; line-height:24px;}
#tab_nav li{float:left; margin:0 3px; list-style:none; border:1px solid #999; border-bottom:none; height:24px; width:60px; text-align:center; background:#FFF;}
a{font:bold 14px/24px "微软雅黑", Verdana, Arial, Helvetica, sans-serif; color:green; text-decoration:none;}
a:hover{color:red;}
#tab_content{width:398px; height:273px; border:1px solid #999; font:bold 4em/273px "微软雅黑", Verdana, Arial, Helvetica, sans-serif; text-align:center; background:#FFF; overflow:hidden;}
#t_1,#t_2,#t_3{width:100%; height:273px;}
</style>
</head>
<body>
<div id="box">
<ul id="tab_nav">
<li><a href="#t_1">tab_1</a></li>
<li><a href="#t_2">tab_2</a></li>
<li><a href="#t_3">tab_3</a></li>
</ul>
<div id="tab_content">
<div id="t_1">tab_壹</div>
<div id="t_2">tab_贰</div>
<div id="t_3">tab_叁</div>
</div>
</div>
</body>
</html>
参考资料： http://omiga.org/lab/css_tab.html
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
类似于这样的效果，建议你用js或者jquery实现，简单而且效果好，用css写出来可能会不兼容，也不是很好写，
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
纯CSS的话不太好解决吧。
还是用JS更容易点。
还是用JS更容易点。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
Vue实践-CSS样式position/display/float属性对比使用
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
