<style type="text/css>
.xyz {
position: absolute;
top: 120px;
left: 160px;
z-index: -1;
}
#container {
position: relative;
overflow: visible;
opacity: .3;
}
</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="40" width="60"
onmouseover="this.src='<%=request.getContextPath()%>/Files/images/Koala.jpg'">
</a>
</div>
</div>
</body>
The anchor tag in this code is not functioning properly. The image play.png should transform into Koala.jpg when hovered over, and when clicked it should redirect to Home.jsp. However, the issue arises when using a div element. When placing the anchor within the div, neither the image changes on mouseover nor does it link to Home.jsp as expected.