阻止 not behaving like [duplicate]

Question

这个问题在这里已有答案：

• What elements can be contained within a <a> tag? 6个答案

我正在尝试为我正在拉拢的网站创建一张卡片。在悬停时，一些文本滑入视图（我使用:hover结合max-height）。为了使整张卡片可以点击，我试图将<div>改为<a>，我添加了display:block。

我很惊讶行为是不同的 - 我希望它们是相同的。

两个问题：

• 我如何才能获得正确的行为 - 只需在没有JavaScript的情况下点击该卡即可。
• 我错过了什么潜在的问题？

这个版本有<div>：

.card {
  background: yellow;
  border-radius: .5em;
  height: 15em;
  position: relative;
  overflow: hidden;
  transition: all 1s ease-in-out;
}

.card:hover img {
  transform: scale(1.1);
}
.card:hover .card-slider {
  max-height: 7em;
}

.card-content {
  position: absolute;
  bottom: 0;
  display: block;
}

.card-slider {
  transition: all 1s ease-in-out;
  max-height: 0;
  overflow: hidden;
}

.card h1 {
  background: rgba(0, 0, 0, 0.1);
  color: white;
}

.card img {
  transition: all 1s ease-in-out;
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card .meta-cat {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
}

.card .meta {
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: space-between;
}

.meta-author, .meta-date {
  list-style: none;
}

<article class="card">
            <img src="http://via.placeholder.com/350x200" alt="">
            <header class="meta-cat">Lorem.</header>
            <div href="#" class="card-content">
                <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, velit.</h1>
                <section class="card-slider">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dignissimos dolor ex in iusto magnam
                    molestias odit quaerat rem rerum, similique sit sunt totam veritatis vitae voluptate, voluptatum? Amet,
                    maxime.</p>
                    <ul class="meta">
                        <li class="meta-author"><a href="#">WO J Wright</a></li>
                        <li class="meta-date">Posted 5 days ago</li>
                    </ul>
                </section>
            </div>
        </article>

这个版本将<div>更改为<a>。

.card {
  background: yellow;
  border-radius: .5em;
  height: 15em;
  position: relative;
  overflow: hidden;
  transition: all 1s ease-in-out;
}

.card:hover img {
  transform: scale(1.1);
}
.card:hover .card-slider {
  max-height: 7em;
}

.card-content {
  position: absolute;
  bottom: 0;
  display: block;
}

.card-slider {
  transition: all 1s ease-in-out;
  max-height: 0;
  overflow: hidden;
}

.card h1 {
  background: rgba(0, 0, 0, 0.1);
  color: white;
}

.card img {
  transition: all 1s ease-in-out;
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card .meta-cat {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
}

.card .meta {
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: space-between;
}

.meta-author, .meta-date {
  list-style: none;
}

<article class="card">
            <img src="http://via.placeholder.com/350x200" alt="">
            <header class="meta-cat">Lorem.</header>
            <a href="#" class="card-content">
                <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, velit.</h1>
                <section class="card-slider">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dignissimos dolor ex in iusto magnam
                    molestias odit quaerat rem rerum, similique sit sunt totam veritatis vitae voluptate, voluptatum? Amet,
                    maxime.</p>
                    <ul class="meta">
                        <li class="meta-author"><a href="#">WO J Wright</a></li>
                        <li class="meta-date">Posted 5 days ago</li>
                    </ul>
                </section>
            </a>
        </article>

Answer 1

实际上你可以在<a>标签里面有块元素，就像你已经说过的那样，用span替换.meta-author里面的嵌套<a>标签，让你的最后一个剪辑工作。

.card {
  background: yellow;
  border-radius: .5em;
  height: 15em;
  position: relative;
  overflow: hidden;
  transition: all 1s ease-in-out;
}

.card:hover img {
  transform: scale(1.1);
}
.card:hover .card-slider {
  max-height: 7em;
}

.card-content {
  position: absolute;
  bottom: 0;
  display: block;
}

.card-slider {
  transition: all 1s ease-in-out;
  max-height: 0;
  overflow: hidden;
}

.card h1 {
  background: rgba(0, 0, 0, 0.1);
  color: white;
}

.card img {
  transition: all 1s ease-in-out;
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card .meta-cat {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
}

.card .meta {
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: space-between;
}

.meta-author, .meta-date {
  list-style: none;
}

<article class="card">
            <img src="http://via.placeholder.com/350x200" alt="">
            <header class="meta-cat">Lorem.</header>
            <a href="#" class="card-content">
                <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, velit.</h1>
                <section class="card-slider">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dignissimos dolor ex in iusto magnam
                    molestias odit quaerat rem rerum, similique sit sunt totam veritatis vitae voluptate, voluptatum? Amet,
                    maxime.</p>
                    <ul class="meta">
                        <li class="meta-author"><span>WO J Wright</span></li>
                        <li class="meta-date">Posted 5 days ago</li>
                    </ul>
                </section>
            </a>
        </article>