我製作了一個圖像看起來像一個可點擊的按鈕，但現在當我點擊它，不作爲超鏈接？

這是我的按鈕代碼：我製作了一個圖像看起來像一個可點擊的按鈕，但現在當我點擊它，不作爲超鏈接？

.info_button { 
    width: 220px; 
    height: 300px; 
    position: absolute; 
    overflow: hidden; 
    margin-right: 0; 
    border-radius: 10px; 
-o-border-radius: 10px; 
-ms-border-radius: 10px; 
-webkit-border-radius: 10px; 
background: url(http://i.imgur.com/DkdX4Ci.jpg); 
background-repeat: no-repeat; 
background-position: 0 0; 
box-shadow: 3px 3px 20px #363024; 
} 
.info_button > header { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    padding: 20px 10px; 
    background: inherit; 
    background-attachment: fixed; 
    overflow: hidden; 
} 
.info_button > header::before { 
    content: ""; 
    position: absolute; 
    top: -20px; 
    left: 0; 
    width: 100%; 

    background: inherit; 
    background-attachment: fixed; 
    -webkit-filter: blur(4px); 
    filter: blur(4px); 
} 
.info_button > header::after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.5) 
} 

.info_button > header p a { 
    margin: 0; 
    color: white; 
    position: relative; 
    z-index: 0; 
} 

.info_button:hover{ 
box-shadow: 1px 1px 5px #363024; 
-webkit-box-shadow: 1px 1px 5px #363024; 
-moz-box-shadow: 1px 1px 5px #363024; 
position:relative; 
top:7px; 
margin: 0; 
}

這是我的html：

<div class="info_button" style="position:absolute; left:190px; top:25px;"> 
<header> 
<p><a href="https://www.google.com" target="_self"><span id="info_button">    BoilerPlate of my Mansion</span></a></p> 
</header> 
</div>

這是搗鼓我的工作： http://jsfiddle.net/veniarya/ygosqouh/

的按鈕功能完全像我希望它是，但在點擊時不鏈接到超鏈接。如果我缺少某些東西或需要添加內容，請告訴我。謝謝。

來源

2015-02-23 starter

你的CSS使用一個類，你的HTML使用一個ID和一個同名的類。也許你應該選擇一個。 – Biffen 2015-02-23 15:07:01

我試過這已經不起作用了。 – starter 2015-02-23 15:08:49

在你的小提琴中你錯過了錨標記。 – dowomenfart 2015-02-23 15:09:56

這個問題是您在錨標記的z-index設置爲0;一旦你將它改爲正Z-索引即100，鏈接現在可以點擊。

.info_button > header p a { 
    margin: 0; 
    color: white; 
    position: relative; 
    z-index: 100; 
}

至於使整個按鈕點擊，你將不得不修改HTML這樣的：

<a href="https://www.google.com" target="_blank"> 
    <div class="info_button" style="position:relative; left:190px; top:25px;"> 
     <header> 
      <p><span id="info_button"> 
      BoilerPlate of my Mansion</span></p> 
     </header> 
    </div> 
</a>

來源

2015-02-23 15:48:19 dowomenfart

感謝您的幫助，現在就開始工作。真的很感激它。祝您有美好的一天。 – starter 2015-02-23 15:53:31

爲什麼你不只是做

<a href="..."> <img src="..."> </a>

來源

2015-02-23 15:10:11 void

我不能使用img標籤，我必須在css中包含圖像 – starter 2015-02-23 15:18:11

那麼爲什麼你在你的小提琴中包含img標籤？你讓我感到困惑@starter – dowomenfart 2015-02-23 15:19:49

對不起，我的小提琴得到了一絲不苟，這是我原來的小提琴： http://jsfiddle.net/veniarya/ygosqouh/ – starter 2015-02-23 15:22:36

所以對於我的問題的答案來自@ Donte'Trumble。 CSS代碼：

.info_button { 
    width: 220px; 
    height: 300px; 
    position: absolute; 
    overflow: hidden; 
    margin-right: 0; 
    border-radius: 10px; 
-o-border-radius: 10px; 
-ms-border-radius: 10px; 
-webkit-border-radius: 10px; 
background: url(http://i.imgur.com/DkdX4Ci.jpg); 
background-repeat: no-repeat; 
background-position: 0 0; 
box-shadow: 3px 3px 20px #363024; 
} 
.info_button > header { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    padding: 20px 10px; 
    background: inherit; 
    background-attachment: fixed; 
    overflow: hidden; 
} 
.info_button > header1::before { 
    content: ""; 
    position: absolute; 
    top: -20px; 
    left: 0; 
    width: 100%; 

    background: inherit; 
    background-attachment: fixed; 
    -webkit-filter: blur(4px); 
    filter: blur(4px); 
} 
.info_button > header::after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.5) 
} 

.info_button > header p { 
    margin: 0; 
    color: white; 
    position: relative; 
    z-index: 0; 
} 

.info_button:hover{ 
box-shadow: 1px 1px 5px #363024; 
-webkit-box-shadow: 1px 1px 5px #363024; 
-moz-box-shadow: 1px 1px 5px #363024; 
position:relative; 
top:7px; 
margin: 0; 
}

HTML：

<a href="https://www.google.com" target="_blank"> 
<div class="info_button" style="position:absolute; left:190px; top:25px;"> 
    <header><p><span id="info_button">BoilerPlate of my Mansion</span></p> 
    </header> 
     </div> 
    </a>

工作小提琴：http://jsfiddle.net/veniarya/ygosqouh/ 問題是我的z-index，要使它成爲一個積極的整數，所以改成了100 0，再次感謝@Donte'Truble。

來源

2015-02-23 16:00:28 starter

我製作了一個圖像看起來像一個可點擊的按鈕，但現在當我點擊它，不作爲超鏈接？

回答

相關問題