创建卡片作为完整链接

我正在使用物化卡片作为我的网页，其想法是使用卡片作为菜单，因此当用户点击卡片的任何部分时，链接应该打开。但它只能通过点击图像和/或文本进行工作，而不是在卡的任何其他部分进行。创建卡片作为完整链接

这是代码：

<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

创建卡片作为完整链接

回答

相关问题