Question

我正在为课堂做一个项目，我做了一个网页，中间有一个标题，左下方有两个图像。当它悬停在其中一只手上时，它将移出屏幕，露出下方的链接。我的链接隐藏在手下，但是当手移动时，链接不可点击。我怎么能这样做？

以下是html和css的相关部分：

<body>
    <a href="https://www.google.com"><p id="rsm">(view my resume.)</p></a>
    <div id="ind_wrap">
        <p id="ind">INDEX.HTML</p>
        <img src="r_hand.png" id="r_hand"/>
        <img src="l_hand.png" id="l_hand"/>
    </div>
</body>

CSS：

#r_hand{
background-image:url("rhand.png");
margin-top:-28%;
margin-left:50%;
height:100%;
width:35%;
animation:fr_bottom 4s 1;
}
#r_hand:hover{
animation:m_right 4s 1;
}
#l_hand{
margin-top:-52%;
margin-left:8%;
height:100%;
width:35%;
animation:fl_bottom 4s 1;
}

#l_hand:hover{
animation:m_left 3s 1;
}
#rsm{
margin-top:40%;
margin-left:20%;
position:absolute;
z-index:-1;
}

所以，#rsm是下方的链接，当左手移出它时会显示，但它不可点击。我该如何解决这个问题？

Answer 1

正如Arun在他的回答中提到的，z-index对此负责，但是简单的悬停不起作用（我假设你不想使用js）。

您使用的是Firefox还是Chrome？ This可能与您的问题有某种关联。

此外，如果您是中心元素，请使用margin: 0 auto;而不是手动修改百分比以适合您的屏幕尺寸。我还建议您仅使用宽度而不是高度的百分比，因为它可能会在不同的屏幕尺寸上产生意外结果。

修改

我没有意识到小提琴中的代码与你发布的代码不同。我也更新了我的答案。

Answer 2

问题是#rsm上的z-index值。在悬停时将其更改为更积极，以便将其呈现在所有其他

之上

图像下的链接无法点击

2 个答案: