1

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

https://i.imgur.com/fdWhZ7Y.jpg

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>
DreamTeK
  • 26,372
  • 18
  • 94
  • 146
dash
  • 1,121
  • 2
  • 14
  • 22
  • 1
    As I can see your both cards are working same. What is the issue? – Bhuwan Mar 25 '19 at 10:05
  • so you want the cursor pointer to target only the image and the heading text? – godfather Mar 25 '19 at 10:09
  • I think I might be smelling the x-thousandths duplicate of https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector here …? – 04FS Mar 25 '19 at 10:09
  • "As I can see your both cards are working same. What is the issue?" --> I checked this again and found out that on Chrome it works fine. But with Firefox I have the problem like described. – dash Mar 25 '19 at 10:12
  • "so you want the cursor pointer to target only the image and the heading text?" --> Right! In chrome it's working fine (I updated this in my question) but with Firefox it does not work. – dash Mar 25 '19 at 10:14
  • 1
    yeah im using chrome its working i opened it whi firefox the second not hovering – godfather Mar 25 '19 at 10:16
  • @dash on mac firefox its working fine. – Bhuwan Mar 25 '19 at 10:19
  • 1
    @dash see [button element in MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#wikiArticle) - *"Permitted content [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) but there must be no [Interactive content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Interactive_content)"*... that means *user interactions* inside button can be disallowed - Chrome is *lenient* here Firefox *enforces* it... simple - don't use such *markup*! – kukkuz Mar 25 '19 at 13:17

1 Answers1

0

This was a six years old Firefox bug which was fixed in Firefox 66.

Children of the button tag now do respond to :hover. :)

dash
  • 1,121
  • 2
  • 14
  • 22