1

次のコードはフィドルで試しましたが、実際にデスクトップで取得しても機能していないようです。画像は、JavaScriptを使用してメイン画像にオーバーレイしようとしています。参照のどこかが間違っていると思います。少し助けていただければ幸いです。

コード：

  <html>
  <head>
    <style>
        div {
            position:absolute;   
        }

        #main {   
            width:256px;
            height:256px;
        }

        #overlay {
            position:absolute;
            height:100px;
            width:100px;
            top:0;
            left:0; 
            display:none;
        }

        .overly {
            position:absolute;
            height:100px;
            width:100px;
            bottom:0;
            right:0; 
            display:none;    
        }
    </style>
    <script>
        $(document).ready(function() {
            $("#main").mouseenter(function() {
                $("#overlay").show();
            });
            $("#main").mouseleave(function() {
                $("#overlay").hide();
            });
        });
        $(document).ready(function() {
            $("#main").mouseenter(function() {
                $("#overly").show();
            });
            $("#main").mouseleave(function() {
                $("#overly").hide();
            });
        });
    </script>
</head>
<body style="margin:0px; padding-top:0px">
    <div>
        <a href="">
            <img id="main" src="image/productold.JPG" />
            <img id="overlay"  src="image/over1.jpg"/>
            <img class="overly" src="image/over2.jpg"/>
        </a>
    </div>
</body>
</html>
4

1 に答える 1

2

2 つの div のスタイリングに z-index プロパティを追加してみてください。これにより、一方を他方の上に配置できるようになります。例えば：

  #main {   
            width:256px;
            height:256px;
            z-index: 0;
        }

        #overlay {
            position:absolute;
            height:100px;
            width:100px;
            top:0;
            left:0; 
            display:none;
            z-index: 1;
        }

        .overly {
            position:absolute;
            height:100px;
            width:100px;
            bottom:0;
            right:0; 
            display:none;
            z-index: 2;    
        }

このプロパティの詳細については、こちらの Z-Index プロパティに関する W3Schools ページを参照してください。

于 2013-11-04T09:00:36.913 に答える