Question

任何人都可以帮我解决这个问题吗？我正在努力使图像在滚动时出现在透明盒子的前面，但是将线条保持在盒子的后面。如果有人对如何解决这个问题有任何建议我会非常感激。

提前致谢。

迈克

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>

Answer 1

DEMO 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>

Answer 2

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

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

Answer 3

这就是我做的，首先，将您的图像放在每个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; 
}

时间轴上的悬停问题

3 个答案: