Javascript 锚不在div中工作_Javascript_Jquery_Html_Css

Javascript 锚不在div中工作

javascript jquery html css

Javascript 锚不在div中工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这里的锚定标签不起作用。鼠标悬停时，图像play.png应更改为Koala.jpg，单击Home.jsp时应显示。但是代码在没有div的情况下运行。在div中使用锚点，无论是使用mouseover还是链接到Home.jsp，都不会更改图像。只需从CSS中删除z-index即可。更改代码： <style type="text/css"> .xyz { position: absolute; top: 100px; left: 140px; z-inde

这里的锚定标签不起作用。鼠标悬停时，图像play.png应更改为Koala.jpg，单击Home.jsp时应显示。但是代码在没有div的情况下运行。在div中使用锚点，无论是使用mouseover还是链接到Home.jsp，都不会更改图像。

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

<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>

我认为你的锚在一个元素下面，因为z-index:-1，所以它不可点击-

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