0

小提琴：http: //jsfiddle.net/FtQ4d/1/

我正在为班级做一个项目，我制作了一个网页，中间有一个标题，下面有两个左右手的图像。将鼠标悬停在其中一只手上时，它将离开屏幕，显示下方的链接。我已经将链接隐藏在手下，但是当手移动时，链接不可点击。我怎样才能做到这一点？

以下是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当左手移开它时，下面的链接是否会显示出来，但它是不可点击的。我怎样才能解决这个问题？

4

2 回答 2

0

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

您使用的是 Firefox 还是 Chrome？这可能与您的问题有关。

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

编辑：

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

于 2013-10-06T07:27:13.397 回答
0

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

于 2013-10-06T07:31:46.933 回答