Question

我是初学者，我正在制作一个HTML网站。它主要由卡片组成，有些卡片链接到其他页面（例如，传记）。我想要一些卡片，点击后，将我带到另一个网页。我有一个卡片类：

.card {
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.3s;
            border-radius: 10px;

            width: 70%;
            margin: auto;
    }

另一个让这张卡看起来不错的课程：

.card:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }

因此，当鼠标悬停在某些卡片上时，卡片的阴影会增加。这些是我想要链接的卡片（到目前为止只有两张）。其他非链接卡有不同的类别。

有没有办法让卡片在点击时使用card课程链接到另一个页面？应该是卡片上的任何地方都有点击，而不仅仅是文字

Answer 1

您确实将<a>标记包裹在卡片内容周围，但您需要在标签周围添加另一个类，否则可以单击侧面区域。这使它只保留在卡上。

＆＃13;

.card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      transition: 0.3s;
      border-radius: 10px;
      width: 100%;
 }

 .card:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); }
    
 .control-width { width: 70%; margin: auto; }
 
 .card2 {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      transition: 0.3s;
      border-radius: 10px;
      margin: auto;
      width: 70%;
 }

 .card2:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); }

＆＃13;

<div class="control-width">
    <a href="your-link-bio">
      <div class="card">
      <h1>Card Header</h1>
      <h3>Card Sub Header</h3>
      <p>Card Description Card Description Card DescriptionCard DescriptionCard Description<p>
      </div>
    </a>
  </div>


 <a href="your-link-bio">
   <div class="card2">
     <h1>Card Header</h1>
     <h3>Card Sub Header</h3>
     <p>Card Description Card Description Card DescriptionCard DescriptionCard Description<p>
   </div>
 </a>

＆＃13;

点击卡片即可打开链接

1 个答案: