javascript - 使用 JQuery 调整/强制 Z 索引

Question

我正在为 IE 设计一个 3D 太阳系部件的替代平面版本(因为目前在 IE 中不能进行过渡)但是我在 IE 中的 Z-index 遇到了很多麻烦。索引在 3D webkit 版本中完美运行。

我已经尝试手动调整 IE css 的 z-indexes，但 div 就是不动。我需要另一双眼睛。

这是整篇文章的 JSBin 链接。 http://jsbin.com/sagix/1/edit

当您点击导航菜单中的相应选项时，每个星球都会被激活。我遇到的问题是，一旦行星处于事件状态，就会出现悬停调用。但是当我悬停时，由于 z 索引，左侧行星的悬停调用(育儿、压力、灵性)没有响应。

所以我的想法是尝试使用 JQuery。如果它没有发生在 CSS 中，我可以在点击时使用 JQuery 强制转发 div 吗？

如果我可以强制它向前，这是否是正确的语法(这是本文中唯一的外部自定义 JS。它是 http://secure.cart32.com/WarrenKahn/scripts.min3.js)？

$(window).load(function(){var e=$("body"),t=$("#universe"),n=$("#solar-system"),r=function()
{e.removeClass("view-2D opening").addClass("view-3D").delay(500).queue(function()  
{$(this).removeClass("hide-UI").addClass("set-speed");

$(this).dequeue()})},i=function(e){t.removeClass().addClass(e)};
$("#toggle-data").click(function(t){e.toggleClass("data-open data-close");
t.preventDefault()});
$("#toggle-controls").click(function(t){e.toggleClass("controls-open controls-close");
t.preventDefault()});
$("#data a").click(function(e){var t=$(this).attr("class");
n.removeClass().addClass(t);
$(this).parent().find("a").removeClass("active");
$(this).addClass("active");
$(this).parent().css('z-index', 1000);
e.preventDefault()});
$(".set-view").click(function(){e.toggleClass("view-3D view-2D")});
$(".set-zoom").click(function(){e.toggleClass("zoom-large zoom-close")});
$(".set-speed").click(function(){i("scale-stretched set-speed")});
$(".set-size").click(function(){i("scale-s set-size")});
$(".set-distance").click(function(){i("scale-d set-distance")});r()});

然后悬停 div 上有一个关闭按钮。我可以将相同的 zindex Jquery 添加到关闭按钮以将其返回到较低的值吗？

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

});

</script>

Answer 1

这是一个有效的 DEMO .如果这能解决您的问题，请告诉我。您可以从我的演示网站的引擎盖下复制代码吗？

我更改了您的以下 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>

我添加了我的 JS 函数:

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';
        }
    }
}

我更改了您的 CSS 代码的以下部分:

.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;
}