I have some cards and want to change the properties border-color
and pointer-events
when a user hovers a span
tag which is inside a button
tag.
This is no problem if i use a
tag, see First Card on the left:
https://codepen.io/anon/pen/JzzEvj
However, when using a PRG pattern with form
and button
changing the pointer event and the border-bottom
color when hovering does not work with Firefox. (See Second Card on the right side)
Any ideas how to fix this in Firefox?
Desired outcome see Card on the left:
- The cursor should have
pointer
state when hovering the image - The cursor should have
pointer
state when hovering the card heading - The card heading's
border-bottom
color should change color when hovering the card heading
I spend a lot of time on this issue but only found this solution https://codepen.io/anon/pen/PLLWxJ which is not exactly the same, because
- the card heading's
border-bottom
color changes when hovering any part of the card. - all parts of the card look clickable when hovering. The cursor state should only change to
pointer
when hovering the image or the card heading.
a {
text-decoration: none;
}
.product-cards-wrapper {
background: #fff;
padding: 64px 0;
}
.product-cards {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.product-card {
border: 1px dotted #ccc;
cursor: default;
margin: 0 16px 32px;
width: 250px;
text-align: center;
}
.product-card-img-wrapper {
align-items: center;
cursor: pointer;
display: flex;
justify-content: center;
height: 150px;
line-height: 0;
margin-bottom: 16px;
}
.product-card-heading {
border-bottom: 1px solid #e5e5e5;
color: #2bb3f0;
display: inline;
font-family: sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.6;
text-align: center;
transition: border-color .2s;
}
.product-card-heading:hover {
border-color: #2bb3f0;
cursor: pointer;
}
.product-card-label {
background: #fee5ad;
border-radius: 99px;
color: rgba(0, 0, 0, .54);
cursor: text;
font-family: sans-serif;
font-size: 14px;
font-weight: 600;
margin-top: 4px;
padding: 2px 10px;
}
.product-card>button {
background: 0;
border: 0;
padding: 0;
width: 100%;
}
.product-card-heading {
border-bottom: 1px solid #e5e5e5;
color: #2bb3f0;
cursor: pointer;
transition: border-color .2s;
}
.product-card button .product-card-img-wrapper,
.product-card button .product-card-heading {
cursor: pointer;
}
.product-card button .product-card-heading:hover {
border-color: #2bb3f0;
}
.product-card-labels {
display: block;
font-family: sans-serif;
}
<section class=product-cards-wrapper>
<div class=product-cards>
<a class=product-card href=#>
<div class=product-card-img-wrapper>
<img src=https://via.placeholder.com/160x150 alt="">
</div>
<div class=product-card-heading>First Card</div>
<div class=product-card-labels><span class=product-card-label>Label</span></div>
</a>
<form class=product-card action=# method=post target=_blank>
<button name=l value=123>
<span class=product-card-img-wrapper>
<img src=https://via.placeholder.com/120x150 alt="">
</span>
<span class=product-card-heading>Second Card</span>
<span class=product-card-labels><span class=product-card-label>Label</span></span>
</button>
</form>
</div>
</section>