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

尝试将 z-index 属性添加到两个 div 的样式中。这应该允许您将一个放在另一个之上。例如：

  #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 回答