鏈接無法點擊

我做A類項目，我做了一個網頁，其中有在中心的標題和左，右手的兩個圖像的下方。在懸停在其中一隻手上時，它將從屏幕上移開，顯示下面的鏈接。我已將鏈接隱藏在手中，但當手移動時，鏈接不可點擊。我怎麼能這樣做？

這裏是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是當左手移出它的方式，下面的鏈接顯露，但它不可點擊。我怎樣才能解決這個問題？

來源

2013-10-06 user2423264

您可以讓一個JSFiddle向我們展示實際發生的事情嗎？我的猜測是div位於鏈接的頂部，並且由於div實際上並沒有移動（它會出現），所以鏈接不會通過div點擊。 –

小提琴創建。如您所見，鏈接不可點擊。 – user2423264

鏈接到你的小提琴 –

問題是#rsm上的z-index值。在懸停時將其更改爲更積極，以便將其呈現給所有其他人

來源

2013-10-06 07:31:46

當我在#rsm：hover上更改z-index時，它不起作用，但是當我在#rsm上更改z-index時，它是可點擊的。有沒有辦法讓它按照我想要的方式工作？編輯：我試圖將#l_hand：懸停動畫中的z-index更改爲負9，但仍然不會使鏈接可點擊。 – user2423264

如果您將HTML源代碼中的圖像放入圖像之後，則可以使用懸停狀態對其進行定位。 –

哦，夥計！有用！非常感謝！我不確定是誰來標記「回答問題」複選標記。 0_0 – user2423264

正如Arun在他的回答中提到的那樣，z-index對此負責，但是簡單的懸停不起作用（我假設你不想使用js）。

您使用的是Firefox還是Chrome？ This可能會以某種方式與您的問題相關。

此外，如果您正在對中元素請使用margin: 0 auto;而不是手動修補百分比以適合您的屏幕大小。我也建議你只使用寬度而不是高度的百分比，因爲它可能會在不同的屏幕尺寸上產生意想不到的結果。

編輯：

我沒有意識到在小提琴的代碼是從您發佈的不同。我也更新了我的答案。

來源

2013-10-06 07:27:13 b28c92e5ff1

我改變了小提琴中的代碼，所以鏈接實際上在手的下面。而且，我不得不將圖像放在imgur上，因此img src就是從那裏開始的。另外，margin：0會自動將文本放在屏幕的左側。也許我做錯了。 – user2423264

我已經更新了我的答案。 – b28c92e5ff1

鏈接無法點擊

回答

相關問題