0

谁能帮我解决这个问题？我正在努力让 pin 图像在翻转时出现在透明框的前面，但将线保持在框的后面。如果有人对如何解决这个问题有任何建议，我将不胜感激。

提前致谢。

  • 麦克风

http://resources.29kdev.com/timeline/demo.html

这是HTML：

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- Attach our CSS -->
<link rel="stylesheet" href="style.css">  
<!-- Attach necessary JS -->
<script src="http://code.jquery.com/jquery-latest.js"></script>


<title>Timeline</title>  
</head>
<body>

<!-- =======================================

TIMELINE CONTENT 

======================================= -->
<div id ="pagewrap">    
<div id ="wrapper"> 

    <div id="timeline">

        <img src="images/timeline.png">

    </div> <!--end timeline -->

    <ul> <!--begin ul -->

    <div id="pin01" class="handle">
    <div class="handleicon"><img src="images/handle.png"></div>
    <div class="handleinfo">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus euismod metus, nec mollis tellus porttitor ut. Nam id accumsan ante. Proin varius ultricies sem et tincidunt.</p>
    </div>
</div> 

<div id="pin02"  class="handle">
    <div class="handleicon"><img src="images/handle.png"></div>
    <div class="handleinfo">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus euismod metus, nec mollis tellus porttitor ut. Nam id accumsan ante. Proin varius ultricies sem et tincidunt.</p>
    </div>
</div>  



<div id="pin03"  class="handle">
    <div class="handleicon"><img src="images/handle.png"></div>
    <div class="handleinfo">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus euismod metus, nec mollis tellus porttitor ut. Nam id accumsan ante. Proin varius ultricies sem et tincidunt.</p>
    </div>
</div>   


<div id="pin04"  class="handle">
    <div class="handleicon"><img src="images/handle.png"></div>
    <div class="handleinfo">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus euismod metus, nec mollis tellus porttitor ut. Nam id accumsan ante. Proin varius ultricies sem et tincidunt.</p>                </div>
</div>
<div id="pin05"  class="handle">
    <div class="handlerighticon"><img src="images/handle.png"></div>
    <div class="handleinfo handlerightinfo">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus euismod metus, nec mollis tellus porttitor ut. Nam id accumsan ante. Proin varius ultricies sem et tincidunt.</p>
    </div>
</div>

</ul> <!--end ul -->

<div id="title">
    <div id="lefttitle">
        <h4>Our Company History</h4>
    </div> <!--end lefttitle-->
    <div id="righttitle">
        <p class="title">Rollover an Event</p>
    </div> <!--end righttitle-->
    <div class="clear"></div>
</div><!--end title -->


<!--fadeToggle script -->

<script>
$('.handle').on('mouseover', function(){
$(this).css('z-index', '200000000');
});
$('.handle').on('mouseout', function(){
$(this).css('z-index', '100000000');
});

$('.handleicon').on('mouseover', function(){
$(this).css('z-index', '-200000000');
});
$('.handleicon').on('mouseout', function(){
$(this).css('z-index', '-100000000');
});

$('.handlerighticon').on('mouseover', function(){
$(this).css('z-index', '-200000000');
});
$('.handlerighticon').on('mouseout', function(){
$(this).css('z-index', '-100000000');
});

$(".handle").hover(
    function() {
        $(this).addClass("topdiv");
        $(this).children(".handleinfo").fadeIn("fast");
    },
    function() {

        $(this).children(".handleinfo").fadeOut("fast", function() {$(this).removeClass("topdiv");});
    }
);

$(".handleright").hover(
    function() {
        $(this).addClass("topdiv");
        $(this).children(".handlerightinfo").fadeIn("fast");
    },
    function() {

        $(this).children(".handlerightinfo").fadeOut("fast", function() {$(this).removeClass("topdiv");});
    }
);

$(document).ready(function() {
    $('#backgroundfade').fadeOut(2000, function(){$('#maincontent').fadeTo(1000,1);});
});
</script>

</body>
4

3 回答 3

2

演示http://jsbin.com/welcome/22311/edit

只需更改您的 jQuery

<script>
$('.handle').on('mouseover', function(){
$(this).css('z-index', '200000000');
$(this).find(".handleicon img").css({'z-index':'200000000',"position":"relative"});
});
$('.handle').on('mouseout', function(){
$(this).css('z-index', '100000000');
$(this).find(".handleicon img").css({'z-index': "-1","position":"relative"});
});


$('.handlerighticon').on('mouseover', function(){
$(this).css('z-index', '-200000000');
});
$('.handlerighticon').on('mouseout', function(){
$(this).css('z-index', '-100000000');
});

$(".handle").hover(
    function() {
        $(this).addClass("topdiv");
        $(this).children(".handleinfo").fadeIn("fast");
    },
    function() {

        $(this).children(".handleinfo").fadeOut("fast", function() {$(this).removeClass("topdiv");});
    }
);

$(".handleright").hover(
    function() {
        $(this).addClass("topdiv");
        $(this).children(".handlerightinfo").fadeIn("fast");
    },
    function() {

        $(this).children(".handlerightinfo").fadeOut("fast", function() {$(this).removeClass("topdiv");});
    }
);

$(document).ready(function() {
    $('#backgroundfade').fadeOut(2000, function(){$('#maincontent').fadeTo(1000,1);});
});
</script>
于 2012-09-12T15:17:00.133 回答
1

z-index从图片容器中移除 ( ) <div class="handleicon">。
不要将它移到后面，而是将信息框 ( <div class="handleinfo">) 和它<img>本身移动到前面（图像在信息框上方，例如图像上的 200 和信息框上的 100）。当然，两者都需要position:relative这样的z-index作品。

Z 索引很复杂。
如果我没记错的话，在position:relative元素上使用 z-index 定义了一个新层，并且您不能在放置在该层内的东西之间放置任何东西。通过避免position:relative容器 div 上的 ，您无需定义该层，并且可以将图片移动到前面，而不会使 div 的行也出现在前面。

于 2012-09-12T15:03:36.070 回答
0

这就是我所做的，首先，将您的 Image 放在每个 div 中的句柄类下方。

<div id="pin01" class="handle">
    <img src="images/handle.png"></div> 
    <div class="handleicon">
    <div class="handleinfo">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus euismod metus, nec mollis tellus porttitor ut. Nam id accumsan ante. Proin varius ultricies sem et tincidunt.</p>
    </div>
</div>

您需要在每个 div 上执行此操作。然后在您的 CSS 上，我将您的 handleicon 类的高度更改为 0px

.handleicon {
    width: 32px;
    height: 0px;
    position:relative; 
}
于 2012-09-12T15:51:05.217 回答