阻止 <a> 的行为不像 <div> [重复]答案

【问题标题】：Block <a> not behaving like <div> [duplicate]阻止 <a> 的行为不像 <div> [重复]
【发布时间】：2019-04-22 21:35:06
【问题描述】：

我正在尝试为我正在整合的网站创建一张卡片。悬停时，一些文本会滑入视图（我使用了: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>

【问题讨论】：

即使设置为display:block，仍然不允许有某些子节点。您的浏览器可能过早地关闭了标签，而您的所有其他元素都在<article> 中裸露。您可以通过使用浏览器的标记检查器检查您的代码来确认这一点。
如果您希望元素看起来“可点击”，您可以简单地使用cursor: pointer，如果您不打算使用href 来控制点击，则没有理由使用锚标记行动。
感谢 cmets - 简单的答案似乎是我的问题是由嵌套的 <a> 标签引起的。虽然链接的文章确实提供了答案，但我认为我的问题不一定会引导您提出这个问题。因此，不确定将其标记为重复是否正确。

标签： css block

【解决方案1】：

实际上，您可以在<a> 标签中包含块元素，正如您已经说过的，只需将 .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>

【讨论】：