Z索引 - 滑动过渡重叠有没有办法创建动态z索引？

时间：2013-12-20 17:51:39

标签： html css z-index

我已经为此工作了好几天。我一直在自学CSS，所以对菜鸟很好。我正在创建一个推荐滑块。推荐书以3块为单位显示。我希望前2名下滑，第3名上升。但是当滑块激活无论我对悬停中的Z索引做什么时，第三个推荐的desc div仍会显示在其他推荐下方。另请注意，我将其嵌入Wix网站（是的，是的，我知道），这就是我没有使用sep样式表的原因。

请帮忙。这是代码：

<!DOCTYPE html>
<html>
<head>
<style>

.Holt{
position: relative;
z-index: 9;
background-image:url("http://static.wix.com/media/2235b3_e3148abc7ee042adb94751efb211bd81.png_850");
width:777px;
height:116px;
-moz-transition: all 0.5s ease; 
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.Holt:hover{
background-image:url("http://static.wix.com/media/2235b3_083d120266e44626aef3a13fc9d9571d.png_850");
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
-ms- box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
-moz-transform: scale(1.01, 1.01);
-webkit-transform: scale(1.01, 1.01);
-ms-transform: scale(1.01, 1.01);
-o-transform: scale(1.01, 1.01);
transform: scale(1.01, 1.01);
}

.Holt div.desc{ 
position: absolute;
width: 99.5%;
z-index: 8; 
bottom: 0;
left: 0px;
padding: 2px;
text-align:justify;
line-height:119%;
background: rgba(231, 232, 232, .9);
color:#060404;
-moz-border-radius: 0 0 8px 8px; 
-webkit-border-radius: 0 0 8px 8px;
-o-border-radius: 0 0 8px 8px;
-ms-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0;
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; 
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.Holt div.desc a{
color: white;
}

.Holt:hover div.desc{
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1;
}

.Rose{
position: relative;
z-index: 7;
background-image:url("http://static.wix.com/media/2235b3_3598323284184651bf79a10568aa5333.png_1024");
width:777px;
height:116px;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.Rose:hover{
background-image:url ("http://static.wix.com/media/2235b3_b9f759cc6e644d90bf91184f33747129.png_850");
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
-ms- box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
-moz-transform: scale(1.01, 1.01);
-webkit-transform: scale(1.01, 1.01);
-ms-transform: scale(1.01, 1.01);
-o-transform: scale(1.01, 1.01);
transform: scale(1.01, 1.01);
}

.Rose div.desc{
position: absolute;
width: 99.5%;
z-index: 6;
bottom: 0;
left: 0px;
padding: 2px;
text-align:justify;
line-height:119%;
background: rgba(231, 232, 232, .9);
color:#060404;
-moz-border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
-o-border-radius: 0 0 8px 8px;
-ms-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0;
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s;
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.Rose div.desc a{
color: white;
}

.Rose:hover div.desc{
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1;
}

.Crozat{
position: relative;
z-index: 5;
background-image:url("http://static.wix.com/media/2235b3_4adb40821e3b4737a40bd070f147ed4a.png_850");
width:777px;
height:116px;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.Crozat:hover{
background-image:url("http://static.wix.com/media/2235b3_a45ada8a12654b17a3fd22f0c987a6f5.png_850");
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
-ms- box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
-moz-transform: scale(1.01, 1.01);
-webkit-transform: scale(1.01, 1.01);
-ms-transform: scale(1.01, 1.01);
-o-transform: scale(1.01, 1.01);
transform: scale(1.01, 1.01);
}

.Crozat div.desc{
position: absolute;
width: 99.5%;
z-index: 4;
top: 0;
bottom: auto;
left: 0px;
padding: 2px;
text-align:justify;
line-height:119%;
background: rgba(231, 232, 232, .9);
color:#060404;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
-o-border-radius: 8px 8px 0 0;
-ms-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
opacity: 0;
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s;
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.Crozat div.desc a{
color: white;
}

.Crozat:hover div.desc{

-moz-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform: translate(0, -100%);
opacity:1;
}

</style>
</head>
<body>

<div class="Holt">
<div class="desc">
<p style="margin-left:20px;margin-right:20px;font-family:arial; font-size:13px;">“I am grateful
to have had the opportunity to experience Warren’s insight, grace, boldness and heart over the
last several years all of which have served me personally and professionally. The skills that he
personifies not only in his coaching and training but in his daily life have inspired me to make
many successful changes in my communications, clarifying current challenges and solutions, and
supporting me to the see the other side of some difficult issues.  I heartily recommend Warren
if you want to go to the next level in your life or profession.”
<p style="color:#2a4451; margin-left:20px;margin-right:20px;line-height:108%;font-family:arial; 
font-size:13px;padding:0; margin-bottom: 0;">William DB Holt
<p style="color:#c7c7c7; margin-left:20px;margin-right:20px;line-height:108%;font-family:arial;
font-size:13px;padding:0;margin-top: 0">Partner
<br><a href="http://www.trivergentinternational.com/TrivVergent_International%
3A_Optimizing_Human_Capital/Video_Introduction.html" target="_blank">Trivergent 
International</a> <br>
</p>
</div>
</div>

<div class="Rose">
<div class="desc">
<p style="margin-left:20px;margin-right:20px;font-family:arial; font-size:13px;">"Warren seems
to get at the root of what is slowing or blocking my ability to move forward in my life business
wise and personal. His coaching has increased my success dramatically."
<p style="color:#2a4451; margin-left:20px;margin-right:20px;line-height:108%;font-family:arial;
font-size:13px;padding:0; margin-bottom: 0;">Jeff Rose
<p style="color:#c7c7c7; margin-left:20px;margin-right:20px;line-height:108%;font-family:arial;
font-size:13px;padding:0;margin-top: 0">Principal
<br><a href="http://www.mcgillengineers.com/" target="_blank">McGill Associates Engineering</a>  
<br>
</p>
</div>
</div>

<div class="Crozat">
<div class="desc">
<p style="margin-left:20px;margin-right:20px;font-family:arial; font-size:13px;">"Warren seems
to get at the root of what is slowing or blocking my ability to move forward in my life business 
wise and personal. His coaching has increased my success dramatically."
<p style="color:#2a4451; margin-left:20px;margin-right:20px;line-height:108%;font-family:arial;
font-size:13px;padding:0; margin-bottom: 0;">Jeff Rose
<p style="color:#c7c7c7; margin-left:20px;margin-right:20px;line-height:108%;font-family:arial;
font-size:13px;padding:0;margin-top: 0">Principal
<br><a href="http://www.mcgillengineers.com/" target="_blank">McGill Associates Engineering</a> 
<br>
</p>
</div>
</div>


</body>
</html>

1 个答案:

答案 0 :(得分：0)

您好，您可能需要更改z-index上主要div的:hover：

  • 首先删除z-index - .Holt和.Rose

    的.Crozat值 
    .Crozat{
   position: relative;
   /*z-index: 5; Remove this*/

  • 第二次在CSS上添加：

    .Holt:hover, .Rose:hover, .Crozat:hover {
   z-index:1;
}

在这里，您可以看到代码 http://jsfiddle.net/LGCNx/3/

的演示
相关问题
最新问题