我使圖像看起來像一個可單擊的按鈕，但是現在當我單擊它時，它是否不充當超鏈接？

Question

這是我的按鈕代碼：

.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/

該按鈕的功能與我希望的完全相同，但是單擊后不會鏈接到超鏈接。 如果我缺少某些東西或需要添加一些東西，請告訴我。 謝謝。

Answer 1

你為什么不做

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

Answer 2

問題是您將錨標記上的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>

Answer 3

因此，我的問題的答案來自@ 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索引上，必須使其為正整數，所以將其從0更改為100，再次感謝@ Donte'Truble。