使用圖像作爲鏈接，同時點擊時隱藏/替換它

我試圖使用圖像作爲鏈接，同時用另一圖像替換它時同時單擊。（基本上想讓它看起來像一個按鈕，一旦用戶點擊它）。這裏是我的代碼：使用圖像作爲鏈接，同時點擊時隱藏/替換它

HTML

<a class="button" id="nonpressed" href="..."><img src="images/nonpressed.png"/></a> 
<a class="button" id="pressed" href="..."><img src="images/pressed.png"/></a>

CSS

.button { 
position: absolute; 
top: 540px; 
left: 90px; 
} 

#nonpressed { 
z-index: 2; 
} 

#nonpressed:active { 
visibility: hidden; 
} 

#pressed { 
z-index: 1; 
}

的問題是，一旦我得到隱藏#nonpressed該鏈接不工作了。我試着隱藏/顯示，並用jQuery替換，但它也沒有真正幫助...（也許我只是搞砸了，因爲我只是開始使用網頁設計 - ）。關於如何使這項工作的任何想法？非常感謝你！！

來源

2017-06-23 A.Noot

除非你的按鈕是真正看中的，我建議不要使用圖像。 –

感謝您的諮詢！我必須爲我的項目使用一個非常具體的「不要按」按鈕，所以在這種情況下從頭開始創建/設計一個樣式將會複雜得多...：，） –

如果您只是想更改圖像，則無需更改整個鏈接。使用背景圖像屬性非常簡單。因此，它是CSS唯一的解決辦法...

.button { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-image: url(http://lorempixel.com/400/200/sports/1/); 
 
    background-size: 100px 100px; 
 
} 
 

 
.button:active { 
 
    background-image: url(http://lorempixel.com/400/200/sports/2/); 
 
}

<a class="button" href="#"></a>

，如果你想隱藏/顯示整個（img）鏈接嘗試用display: none;和display: block;無論哪種方式。然後你還需要添加一個wrapper原因，如果你點擊該項目並隱藏它然後它消失了，沒有什麼會知道你仍然點擊它使你隱藏它......這是否有道理？像這樣它的工作原理：

.button { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 10px; 
 
} 
 

 
#nonpressed, 
 
#pressed:active { 
 
    display: none; 
 
} 
 

 
.wrap:active #nonpressed { 
 
    display: block; 
 
}

<div class="wrap"> 
 
<a class="button" id="nonpressed" href="#"><img src="http://lorempixel.com/400/200/sports/2/"/></a> 
 
<a class="button" id="pressed" href="#"><img src="http://lorempixel.com/400/200/sports/1/"/></a> 
 
</div>

來源

2017-06-23 12:34:26 caramba

工作完美，非常感謝！我真的不介意這樣做，所以我使用了第一個代碼;我保留第二份以供將來參考，它一定會很快有用！再次感謝！！ –

@noot很高興它幫助。我總是會推薦第一種方式，原因很多！第二種方式是，如果你出於任何原因，你應該這樣做，以顯示它如何工作......快樂的編碼！ – caramba

使用圖像作爲鏈接，同時點擊時隱藏/替換它

回答

相關問題