0

誰でもこの問題で私を助けることができますか? ロールオーバーしたときに透明なボックスの前にピンの画像が表示されるように取り組んでいますが、ボックスの後ろに線を保持しています。誰かがこれを解決する方法について何か提案があれば、私はそれを大いに感謝します.

前もって感謝します。

  • マイク

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 を使用すると新しいレイヤーが定義され、そのレイヤー内に配置されたものの間に何も配置できません。コンテナ divの を回避することposition:relativeで、そのレイヤーを定義せず、div の線も前面に表示せずに画像を前面に移動できます。

于 2012-09-12T15:03:36.070 に答える
0

これは私がしたことです。まず、各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 に答える