<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>
这里的 anchor 标签不起作用。 图像 play.png 应在鼠标悬停时更改为 Koala.jpg，单击时应显示 Home.jsp。但是代码在没有 div 的情况下也能正常工作。在 div 中使用 anchor 既不会使用鼠标悬停更改图像也不会链接到 Home.jsp。
最佳答案
只需从 CSS 中删除 z-index 。更改代码:
.xyz {
position: absolute;
top: 100px;
left: 140px;
}
关于javascript - anchor 在 div 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28432439/