Question

I'm trying to create a card for a website I'm pulling together. On hover, some text slides into view (I've used :hover combined with max-height). To make the whole card clickable, I tried to change a <div> to <a>, I added display:block.

I'm surprised that the behaviour is different - I expected them to be the same.

Two questions:

How do I get the right behaviour - simply making the card clickable without JavaScript.
What is the underlying issue that I've missed?

This version has the <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>

This version changes the <div> to a <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>标记内包含块元素，只需将.meta-author内的嵌套<a>标记替换为span即可，使您上次被窃取。

.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>

封锁<a> not behaving like <div>

1 个答案: