概述:
一堆互相有重叠的块,鼠标经过某个块时候,通过改变z-index使其位于最上方。
在firefox和opera下表现正常,chrome和safari下无效。
搜不到解决方法。
****************具体实例在这里-********************
http://html5beta.com/category/software-share/
**********html代码-****************
<div class="product-show fix">
<a class="trans-thumb left" href="http://html5beta.com/software-share/office-2010-activator-office-2010-activator/" rel="bookmark" title="Permanent Link To (Office.2010激活器)Office.2010.Activator.">
<img src="http://html5beta.com/wp-content/themes/easyOne/images/logo.gif" />(Office.2010激活器)Office.2010.Activator. </a>
<a class="trans-thumb left" href="http://html5beta.com/software-share/calendar-2011-vector-ai-format-template/" rel="bookmark" title="Permanent Link To 2011年历 矢量(.ai格式)模板">
<img width="70" height="70" src="http://html5beta.com/wp-content/uploads/2010/11/rili3.1.3-150x150.png" class="attachment-70x70 wp-post-image" alt="2011年历样例" title="rili3.1.3" />2011年历 矢量(.ai格式)模板 </a>
<a class="trans-thumb left" href="http://html5beta.com/software-share/gulag-archipelago-txt-e-book-download/" rel="bookmark" title="Permanent Link To 古拉格群岛 txt电子书 下载">
<img src="http://html5beta.com/wp-content/themes/easyOne/images/logo.gif" />古拉格群岛 txt电子书 下载 </a>
<a class="trans-thumb left" href="http://html5beta.com/software-share/win-pe-system-can-be-used-for-burning-software-ones-v2-0/" rel="bookmark" title="Permanent Link To 可用于Win PE 系统的刻录软件ones v2.0">
<img src="http://html5beta.com/wp-content/themes/easyOne/images/logo.gif" />可用于Win PE 系统的刻录软件ones v2.0 </a>
</div>
**********html代码-*结束***************
******************css*********************
.trans-thumb{
position:reletive;
z-index: 2;
display:block;
border:1px solid #ddd;
-webkit-transition: -webkit-transform 0.5s ease-in;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
transform: rotate(-8deg);
padding:6px;
background:#fff;
width:92px;
margin:0;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
overflow:hidden;
}
.trans-thumb:focus,
.trans-thumb:active,
.trans-thumb:hover{
z-index:3;
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: rotate(0deg) scale(1.05);
-moz-transform: rotate(0deg) scale(1.05);
-o-transform: rotate(0deg) scale(1.05);
transform: rotate(0deg) scale(1.05);
}
************css结束**************
--
修改:zxdong262 FROM 119.51.161.*
FROM 119.51.161.*