Question

我正在为IE设计一个3D太阳能系统的替代平面版本（因为现在IE中的转换是不行的）但是我在IE中的Z-index遇到了很多麻烦。索引在3D webkit版本中完美运行。

我已经尝试手动调整IE css的z-index，但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。如果这可以解决您的问题，请告诉我。您可以从我的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;
}

使用JQuery调整/强制Z-Indexes

1 个答案: