Targeting span within button tag on hover: How to change border color and pointer?

问题: 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 us...

问题:

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>


回答1:

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

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

  • 发表于 2019-03-27 20:28
  • 阅读 ( 174 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除