css3 手风琴

转载 (原文地址) 波克比 随笔 CSS3 969阅读 2014-08-29 17:14:57 举报

代码片段 1

[code]<style>
/ 纯CSS3幻灯手风琴效果hover切换,默认初始收起 /
{ padding:0; margin:0;}
ul{ list-style:none;}
img{ border:none;}
h3{ text-align:center; margin-top:20px;}
.m-demo{width:600px;height:250px;overflow:hidden; margin: 20px auto;}
.m-demo li img{ width:400px; height:250px;}
.m-demo li{float:left;width:120px;heihgt:100%;box-shadow:0 0 5px rgba(0,0,0,0.5);-webkit-transition:width 0.3s ease-out;-moz-transition:width 0.5s ease-out;-ms-transition:width 0.5s ease-out;transition:width 0.5s ease-out;}
.m-demo:hover li:not(:hover){width:50px;}
.m-demo li:hover{width:400px;}
/
初始展开 */
.m-demo-1 li{width:50px;}
.m-demo-1 li:first-child{width:400px;}
</style>[/code]
简单的说明一下:
li:not(:hover) 选择匹配li下不是指定的:hover伪类。
li:first-child 选择匹配li下的第一个子元素。
所有主流浏览器都支持 :not /:first-child选择器。
注意: IE8 及更早IE版本不支持 :not/:first-child 选择器。

评论 ( 2 )
最新评论