Block not behaving like

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>

Even if it's set to `display:block`, it's still not allowed to have certain children nodes. Your browser is probably closing the tag prematurely and all your other elements are naked inside the `
`. You can confirm this by inspecting your code with the browser's markup inspector. — TylerH, Apr 22 '19 at 21:37
You could simply use `cursor: pointer` if you want the element to look "clickable", there's no reason to use an anchor tag if you're not going to use the `href` to control the click action. — Jake Holzinger, Apr 22 '19 at 21:39
Thanks for the comments - simple answer seems to be that my problem is being caused by my nested `` tags. Whilst the linked article does provide the answer, I don't think the question I had would necessarily lead you to that question. Therefore, not sure marking this as a duplicate would be the right think to do. — Jamie, Apr 22 '19 at 21:53

score 0 · Answer 1 · answered Apr 23 '19 at 00:51

Actually you can have block elements inside <a> tag, as you already said, just replacing the nested <a> tag inside .meta-author with a span, makes your last snipped works.

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

Block not behaving like

1 Answers1