Question

<style type="text/css">
.xyz {
    position: absolute;
    top: 100px;
    left: 140px;
    z-index: -1;
}

#container {
    position: relative;
    overflow: hidden;
    opacity: .2;
}
</style>

<body>
    <div>
        <video id="container" autoplay loop muted>
            <source src="<%=request.getContextPath()%>/Files/images/sample.mp4" type="video/mp4">
        </video>

        <div class="xyz">
            <a href="<%=request.getContextPath() %>/Files/jsp/Home.jsp">
                <img src="<%=request.getContextPath() %>/Files/images/play.png" height="50" width="50"
                    onmouseover="this.src='<%=request.getContextPath()%>/Files/images/Koala.jpg'">
            </a>
        </div>
    </div>
</body>

这里的锚标签不起作用。鼠标悬停时，image play.png应更改为Koala.jpg，单击时应显示Home.jsp。但代码工作没有div。在div中使用锚点既不使用鼠标悬停改变图像，也不链接到Home.jsp。

Answer 1

只需从CSS中删除z-index即可。更改了代码：

.xyz {
    position: absolute;
    top: 100px;
    left: 140px;
}

锚不在div工作

1 个答案: