html - 悬停时按钮标签内的定位范围:如何更改边框颜色和指针?
问题描述
我有一些卡片并且想要更改属性border-color
以及pointer-events
当用户悬停span
标签内的button
标签时。
如果我使用a
标签,这没问题,请参阅左侧的第一张卡片:
https://codepen.io/anon/pen/JzzEvj
但是,当使用 PRG 模式form
并button
更改指针事件和border-bottom
悬停时的颜色时,Firefox 不起作用。(见右侧第二张卡片)
任何想法如何在 Firefox 中解决这个问题?
期望的结果见左侧卡片:
- 悬停图像时光标应该有
pointer
状态 - 悬停卡片标题时光标应该有
pointer
状态 - 将卡片标题
border-bottom
悬停时,卡片标题的颜色应改变颜色
我在这个问题上花了很多时间,但只找到了这个解决方案https://codepen.io/anon/pen/PLLWxJ这并不完全相同,因为
border-bottom
将鼠标悬停在卡片的任何部分时,卡片标题的颜色会发生变化。- 卡的所有部分在悬停时看起来都是可点击的。光标状态应仅
pointer
在悬停图像或卡片标题时更改。
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>
解决方案
这是一个六年前的 Firefox 错误,已在 Firefox 66 中修复。
标签的孩子button
现在确实响应:hover
. :)
推荐阅读
- sql - 使用 SELECT CASE / AND COUNT CASE 修复 SQL 查询
- python - 如何修改已经迁移到数据库中的模型?
- r - 合并两个 data.tables with all.x = T 同时由于重复的 ID 而扩展
- python - Traceback 类未定义
- r - 如何在 cv.glm 中提取插入符号中的交叉验证错误?
- vue.js - 如何在 Vue.js 中获得 fullCalendar 的完整翻译
- python - 已解决 SVM:AttributeError:当我尝试使用 LinearSVC 拟合 TFIDF 时,“numpy.ndarray”对象没有属性“lower”
- python-3.x - 如何使用 to .join() 将字母转换为字符串
- javascript - 如何从模板文字中获取输入值并将其分配给变量?
- java - 不能打印 9 之后的数字