Javascript 使用JQuery调整/强制Z索引

我正在为IE设计一个3D太阳系部件的替代平面版本（因为过渡现在是一个禁止进入的IE），但我在IE中的Z索引方面遇到了很多麻烦。索引在3D webkit版本中工作得非常好

我尝试过手动调整IE css的z索引，但div就是不动。我需要另一双眼睛

这是指向整个工件的JSBin的链接

单击导航菜单中的相应选项时，每个行星都会激活。我遇到的问题是，一旦行星处于活动状态，就会出现悬停呼叫。但当我盘旋时，由于z指数的原因，对左边行星的盘旋呼吁（养育、压力、灵性）没有反应

所以我想用JQuery试试。如果它没有在CSS中发生，我可以在单击JQuery时强制一个div前进吗

如果我可以强制它向前，这是正确的语法吗（这是这篇文章中唯一的外部自定义JS。它是）

然后在hover div上有一个close按钮。我可以将相同的zindex Jquery添加到close按钮以将其返回到较低的值吗

<script>
$(document).ready(function(){
  $("#ca-close1").click(function(){
    $("#descriptionls").fadeOut()
  $('#mercury .infos').css('z-index', 1000);
  });

});

</script>

$（文档）.ready（函数（）{
$（“#ca-close1”）。单击（函数（）{
$（“#说明”）.fadeOut（）
$（'#mercury.infos'）.css（'z-index'，1000）；
});
});

这是一份工作清单。如果这能解决您的问题，请告诉我。你可以从我的演示网站的引擎盖下复制代码吗

我更改了您的以下HTML：

<div id="data">
    <a class="mercury" title="LIFE SKILLS" href="#mercuryspeed" onMouseOver="zOnEvent('mercury', 1);" onMouseOut="zOnEvent('mercury', 2);">LIFE SKILLS</a>
    <a class="jupiter" title="CAREER" href="#jupiterspeed" onMouseOver="zOnEvent('jupiter', 1);" onMouseOut="zOnEvent('jupiter', 2);">CAREER</a>
    <a class="venus" title="PARENTING" href="#venusspeed" onMouseOver="zOnEvent('venus', 1);" onMouseOut="zOnEvent('venus', 2);">PARENTING</a>
    <a class="saturn" title="STRESS" href="#saturnspeed" onMouseOver="zOnEvent('saturn', 1);" onMouseOut="zOnEvent('saturn', 2);">STRESS</a>
    <a class="uranus" title="SPIRITUALITY" href="#uranusspeed" onMouseOver="zOnEvent('uranus', 1);" onMouseOut="zOnEvent('uranus', 2);">SPIRITUALITY</a>
</div>

---

我下面的解决方案在IE 11中工作。我注意到的唯一一件事是，鼠标悬停触发的横幅（1张照片/横幅）中的5张单独照片中有2张由于某种原因没有加载，这是一个单独的无关问题。我花了2.5个小时来解决你的具体问题。你有任何反馈吗？我当然会有反馈。洛杉矶现在才9点。我要去喝点咖啡，然后开始。虽然我在图片加载方面没有任何问题。我唯一的问题是左边的鼠标。这个3D版本的工作非常完美，基本上是完全相同的代码，删除了所有的保留3D和关键帧动画。太棒了！很高兴它成功了！如果您有其他问题，请告诉我。

<div id="data">
    <a class="mercury" title="LIFE SKILLS" href="#mercuryspeed" onMouseOver="zOnEvent('mercury', 1);" onMouseOut="zOnEvent('mercury', 2);">LIFE SKILLS</a>
    <a class="jupiter" title="CAREER" href="#jupiterspeed" onMouseOver="zOnEvent('jupiter', 1);" onMouseOut="zOnEvent('jupiter', 2);">CAREER</a>
    <a class="venus" title="PARENTING" href="#venusspeed" onMouseOver="zOnEvent('venus', 1);" onMouseOut="zOnEvent('venus', 2);">PARENTING</a>
    <a class="saturn" title="STRESS" href="#saturnspeed" onMouseOver="zOnEvent('saturn', 1);" onMouseOut="zOnEvent('saturn', 2);">STRESS</a>
    <a class="uranus" title="SPIRITUALITY" href="#uranusspeed" onMouseOver="zOnEvent('uranus', 1);" onMouseOut="zOnEvent('uranus', 2);">SPIRITUALITY</a>
</div>

function zOnEvent(cl, cond) {
    if (cond === 1) {
        var element = document.getElementsByClassName(cl);
        for (var i=0; i<element.length; i++) {
            element[i].style.zIndex = '97';
        }
    } else if (cond === 2) {
        var element = document.getElementsByClassName(cl);
        for (var i=0; i<element.length; i++) {
            element[i].style.zIndex = '10';
        }
    }
}

.sun #sun .infos,
.mercury #mercury .infos,
.venus #venus .infos,
.earth #earth .infos,
.mars #mars .infos,
.jupiter #jupiter .infos,
.saturn #saturn .infos,
.uranus #uranus .infos,
.neptune #neptune .infos {
display: block;
opacity: 1;
-moz-transform: rotateX(0deg); 
-webkit-transform: rotateX(0deg); 
-o-transform: rotateX(0deg); 
-ms-transform: rotateX(0deg); 
transform: rotateX(0deg); 
   z-index:97;
}

.mercury #mercury.orbit,
.venus #venus.orbit,
.earth #earth.orbit,
.mars #mars.orbit,
.jupiter #jupiter.orbit,
.saturn #saturn.orbit,
.uranus #uranus.orbit,
.neptune #neptune.orbit {
    border: 0px solid rgba(255, 255, 255, 0.8);
    z-index:97;
}

#data {
    position: fixed;
    top: 515px;
    bottom: 0;
    width: 100%;
    height:20px;
    text-align: right;
}