創建卡片作爲完整鏈接

我正在使用物化卡片作爲我的網頁，其想法是使用卡片作爲菜單，因此當用戶點擊卡片的任何部分時，鏈接應該打開。但它只能通過點擊圖像和/或文本進行工作，而不是在卡的任何其他部分進行。創建卡片作爲完整鏈接

這是代碼：

<div class="col l6 m12 s12"> 
       <a href="signup.html" target="_blank"> 
        <div class="card cardHover"> 
       <div class="card-image waves-effect waves-block waves-light"> 
        <a href="signup.html" target="_blank"><img class="activator" src="img/test2.jpg"></a> 
       </div> 
       <div class="card-content"> 
        <span class="card-title activator text-darken-4"><a href="signup.html" class="black-text" target="_blank">RoboTico</a><i class="material-icons right">build</i></span> 
       </div> 
       </div> 
       </a>     
      </div>

以上，我知道是怎麼回事僅與圖像和文本工作的代碼。但我試圖讓所有的卡爲紐帶，像

<a href=""> <div class="col l6 m12 s12"> 
       <a href="signup.html" target="_blank"> 
        <div class="card cardHover"> 
       <div class="card-image waves-effect waves-block waves-light"> 
        <a href="signup.html" target="_blank"><img class="activator" src="img/test2.jpg"></a> 
       </div> 
       <div class="card-content"> 
        <span class="card-title activator text-darken-4"><a href="signup.html" class="black-text" target="_blank">RoboTico</a><i class="material-icons right">build</i></span> 
       </div> 
       </div> 
       </a>     
      </div>

但沒有奏效。

來源

2017-10-21 Esteban Hidalgo

儘量使每一個卡上的href標記絕對試試這個：

div.col{position:relative} 
 
.fullcard{position:absolute; 
 
      top:0; 
 
      left:0; 
 
      width:100%; 
 
      height:100%; 
 
      display:inline-block;  
 
      z-index: 99999;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<!-- Compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> 
 

 
    <!-- Compiled and minified JavaScript --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> 
 
<div class="col l6 m12 s12"> 
 
        <a href="signup.html" class="fullcard" target="_blank"> </a> 
 
       <a href="signup.html" target="_blank"> 
 
        <div class="card cardHover"> 
 
       <div class="card-image waves-effect waves-block waves-light"> 
 
        <a href="signup.html" target="_blank"><img class="activator" src="http://pixdaus.com/files/items/pics/6/20/107620_cb8da068c718b9e6aa7aa0bcbc68d18f_large.jpg"></a> 
 
       </div> 
 
       <div class="card-content"> 
 
        <span class="card-title activator text-darken-4"><a href="signup.html" class="black-text" target="_blank">RoboTico</a><i class="material-icons right">build</i></span> 
 
       </div> 
 
       </div> 
 
       </a> 
 
      </div>

來源

2017-10-21 22:31:17 M0ns1f

如果設置了a是風格display:block，然後包裹在它的一切 - 你應該能夠點擊卡片中的任意位置並導航到新鏈接。您目前必須點擊元素的原因是a是內聯級元素，並且僅響應於直接交互 - 您需要將其設置爲塊級元素，並因此響應該塊內的任何交互。

我添加了幾條樣式規則來突出顯示（如邊框和填充），並以此方式進行，這意味着您只需要在每張卡片中都有一個a。請注意，我沒有您的圖片 - 所以替代文字顯示在這裏。

.display-card { 
 
    border: solid 1px #333; 
 

 
} 
 

 
.nav-link { 
 
    display:block; 
 
    padding:15px 
 
}

<div class="col l6 m12 s12 display-card"> 
 
    <a href="signup.html" target="_blank" class="nav-link"> 
 
     <div class="card cardHover"> 
 
      <div class="card-image waves-effect waves-block waves-light"> 
 
      <img class="activator" src="img/test2.jpg" alt="image"> 
 
      </div> 
 
      <div class="card-content"> 
 
      <span class="card-title activator text-darken-4">     RoboTico <i class="material-icons right">build</i></span> 
 
      </div> 
 
     </div>

來源

2017-10-21 23:56:33 gavgrif

創建卡片作爲完整鏈接

回答

相關問題