使整個div可點擊

Question

我在使整個div可點擊時遇到了一些麻煩。 現在，我有一張圖片，當您將鼠標懸停在它上面時，另一個div會滑動顯示信息。 我想讓整個div可點擊。 例如檢查JsFiddle

這是我到目前為止的內容：

// html

<div class="col-sm-4 peaceful">
    <div class="pre-inner">
        <img src="http://lorempixel.com/304/188/">
            <a href="http://www.google.com">
                <div class="pre-info">
                    <h4>See our activity philosophy</h4>
                    <a class="btn btn-success" href="http://www.google.com">Click Here </a>
                </div>
            </a>
    </div>
</div>

// css

.pre-inner {
    position: relative;
    max-width: 300px;
    overflow: hidden;
    margin: 0px auto 0px;
}

.pre-info {
   position: absolute;
   padding-top: 10px;
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom: 20px;
   bottom: -187px;
   transition: all 0.5s ease;
   background-color: rgba(57, 68, 97, 0.65);
   left: 0;
   right: 0;
}

.pre-inner:hover .pre-info {
   background-color: rgba(57, 68, 97, 0.65);
   bottom: 0; 
   height: 100%;
   width: 100%;
   color: #fff; 

}

我嘗試過移動標簽，但是沒有用，還嘗試給標簽設置了固定的高度和寬度。

我已經創建了一個JsFiddle： http : //jsfiddle.net/52VtD/13932/

Answer 1

嵌套的<a>是不必要的，您可以將其完全剝離，或者如果您希望將鼠標懸停在彈出div中，請將其轉換為<span>

 <div class="col-sm-4 peaceful">
     <div class="pre-inner">
         <img src="http://lorempixel.com/304/188/">
             <a href="http://www.google.com">
                 <div class="pre-info">
                     <h4>See our activity philosophy</h4>
                     <span class="btn btn-success">Click Here </span>
                 </div>
             </a>
     </div> </div>

有關為什么嵌套的<a>標簽可能會如此操作的更多信息，請考慮閱讀以下堆棧溢出問題的答案， 為什么嵌套的錨標簽是非法的？

Answer 2

您可以使用偽指令增加<a>大小，因此整個框都被鏈接覆蓋： http : //jsfiddle.net/52VtD/13936/

.peaceful {
  overflow:hidden;
  position:relative;
}
.peaceful a:before {
  content:'';
  top:0;
  left:0;
  right:0;
  bottom:0;
  position:absolute;

}

 @import url('http://getbootstrap.com/dist/css/bootstrap.css'); .pre-inner { position: relative; max-width: 300px; overflow: hidden; margin: 0px auto 0px; } .pre-info { position: absolute; padding-top: 10px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; bottom: -187px; transition: all 0.5s ease; background-color: rgba(57, 68, 97, 0.65); left: 0; right: 0; } .pre-inner:hover .pre-info { background-color: rgba(57, 68, 97, 0.65); bottom: 0; height: 100%; width: 100%; color: #fff; } .peaceful { overflow:hidden; position:relative; } .peaceful a:before { content:''; top:0; left:0; right:0; bottom:0; position:absolute; } 

 <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script> <div class="col-sm-4 peaceful"> <div class="pre-inner"> <img src="http://lorempixel.com/304/188/"> <a href="http://www.google.com"> <div class="pre-info"> <h4>See our activity philosophy</h4> <a class="btn btn-success" href="http://www.google.com">Click Here </a> </div> </a> </div> </div> <div class="col-sm-4 peaceful"> <div class="pre-inner"> <img src="http://lorempixel.com/304/188/"> <a href="http://www.google.com"> <div class="pre-info"> <h4>See our activity philosophy</h4> <a class="btn btn-success" href="http://www.google.com">Click Here </a> </div> </a> </div> </div> <div class="col-sm-4 peaceful"> <div class="pre-inner"> <img src="http://lorempixel.com/304/188/"> <a href="http://www.google.com"> <div class="pre-info"> <h4>See our activity philosophy</h4> <a class="btn btn-success" href="http://www.google.com">Click Here </a> </div> </a> </div> </div> 

Answer 3

將包含文本“單擊此處”的<a>元素更改為<p>元素。 嵌套<a>標記無效，因為您只將<a>標記包裝在必須鏈接的內容周圍。

因此，在您的情況下，您不希望鏈接文本“單擊此處”，而希望鏈接它周圍的div。 將<a>環繞該div，而不只是將文本“ Click here”環繞。

<div class="col-sm-4 peaceful">
    <div class="pre-inner">
        <img src="http://lorempixel.com/304/188/">
            <a href="http://www.google.com">
                <div class="pre-info">
                    <h4>See our activity philosophy</h4>
                    <p class="btn btn-success">Click Here </p>
                </div>
            </a>
    </div>
</div>

JSFiddle演示

---

另外，我建議您使用W3驗證程序來查看您的HTML是否有效。

在這種情況下，它說：

錯誤：開始標簽<a>可見，但是相同類型的元素已經打開。

如下圖所示：

Answer 4

為什么不將onclick添加到整個div：

<div class="col-sm-4 peaceful" onclick="alert('hello')">

我在您的小提琴中檢查了一下，它的行為似乎像您想要的。 除此之外，所有操作都是警告“ hello”。

Answer 5

您可以使用JS，onclick函數，也可以使用<a></a>包裝div

像這樣http://jsfiddle.net/52VtD/13935/

Answer 6

當前，您可以通過將.pre-info包裹在錨定標記中來使其可單擊，從“單擊此處”中刪除錨定，並用<p>元素替換以保持相同的樣式。

<div class="col-sm-4 peaceful">
  <div class="pre-inner">
    <img src="http://lorempixel.com/304/188/">
    <a href="http://www.google.com">
      <div class="pre-info">
        <h4>See our activity philosophy</h4>
        <p>
          Click Here
        </p>
      </div>
    </a>
  </div>
</div>

但是 ，下面將導致更好的實現。 通過將整個.peaceful元素包裝在錨定標記中，使其可單擊。

只需確保在您的錨標記上放置display: block ，使其行為和樣式與您希望在其上執行的任何自定義樣式一樣。 因此，我在外部錨標記中添加了.wrapper-anchor類：

 .pre-inner { position: relative; max-width: 300px; overflow: hidden; margin: 0px auto 0px; } .pre-info { position: absolute; padding-top: 10px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; bottom: -187px; transition: all 0.5s ease; background-color: rgba(57, 68, 97, 0.65); left: 0; right: 0; } .pre-inner:hover .pre-info { background-color: rgba(57, 68, 97, 0.65); bottom: 0; height: 100%; width: 100%; color: #fff; } .wrapper-anchor { display: block; } 

 <a class="wrapper-anchor" href="http://www.google.com"> <div class="col-sm-4 peaceful"> <div class="pre-inner"> <img src="http://lorempixel.com/304/188/"> <div class="pre-info"> <h4>See our activity philosophy</h4> <p> Click Here </p> </div> </div> </div> </a>