个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-03 18:26:23 27 4
gpt4 key购买 nike

这几天我一直在努力。我一直在自学 CSS，所以对菜鸟好一点。我正在创建一个推荐 slider 。推荐以 3 个 block 显示。我希望前 2 个下降，第 3 个上升。但是当 slider 激活时，无论我在悬停中对 Z 索引做什么，第三个推荐的 desc div 仍然出现在其他 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>

最佳答案

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

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

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

  • 然后在 CSS 上添加:

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

在这里你可以看到你的代码演示 http://jsfiddle.net/LGCNx/3/

关于html - Z 索引 - 滑动过渡重叠有没有办法创建动态 z 索引？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20709285/

27 4 0
文章推荐： javascript - 如何在悬停时停止图像闪烁
文章推荐： ruby 'First and Rest' 逻辑
文章推荐： ruby - 谁可以本地化 resque 作业中的文本？
文章推荐： ruby - rspec 错误 - 没有要加载的文件 - rspec/mocks (LoadError)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com