html – 当鼠标离开Firefox时,Css伪类正在改变选择值

2019年7月20日 255次阅读

我有一个有趣的问题要解决.

我正在使用伪类的组合(exacly like here：div [data-used =“true”]：hover :: after)来改变我的after元素的内容,当像这里一样悬停：

select{
  color: #9E9E9E;
  font-size: 16px;
  padding: 12px;
  background: #ffffff;
  border-radius: 4px;
  border: solid 1px;
  border-bottom-width: 3px;
  border-color: #BDBDBD;
  outline: none;
  margin: 4px 8px;
  height: 48px;
  box-sizing: border-box;
  vertical-align: bottom;
  line-height: 21px;
}

select:hover{
  border-color: #03A9F4 !important;
  color: #03A9F4 !important;
  background: #fff !impotrant;
  box-shadow: 0px 0px 6px 1px rgba(33, 150, 243, 0.36);
}

select:first-of-type{
  margin-left: 0;
}

div[data-used="true"]{
  position: relative;
  display: inline-block;
}

div[data-used="true"]::after{
  content: "✓";
  position: absolute;
  padding: 4px;
  background: #FFF;
  width: 15px;
  height: 26px;
  box-sizing: border-box;
  z-index: 1;
  bottom: 2px;
  line-height: 17px;
  text-indent: -9px;
  font-size: 15px;
  color: #8BC34A;
  font-weight: 600;
  left: -1px;
  transform: translateY(-50%);
}

div[data-used="true"]:hover::after{
  content: "✖";
  text-indent: -11px;
  line-height: 17px;
  font-size: 18px;
  color: #2196F3;
  background: #fff;
  font-weight: 400;
}
<div class="req" data-used="true">
  <label>
    <div class="addad-step-box">
      <div class="addad-step">Rodzaj paliwa<sup>*</sup></div>
    </div>
  </label>
  <select id="xyz_paliwo">
    <option>-- wybierz --</option>
    <option>Benzyna</option>
    <option>Diesel</option>
    <option>Benzyna + LPG</option>
    <option>Benzyna + CNG</option>
    <option>Hybryda</option>
    <option>Elektryczny</option>
    <option>Wodór</option>
    <option>Etanol</option>
  </select>
</div>

正如您所看到的,在Firefox上,当您选择某些内容,然后再次单击列表但没有单击任何新值但悬停新值然后将鼠标移出select时,select正在更改值…

我不知道为什么.

有任何想法吗？

最佳答案 通常会发生什么

在正常情况下(没有所有这些CSS属性)打开< select>,当鼠标移过< select>项目,它们被视为选定的连续(显示蓝色背景).

如果单击该项目,它将保持此选定状态. <选择>关闭,JS事件被触发,< select>显示值是此选定项目.
如果您再次打开< select>,则该项目仍为蓝色.

如果您在< select>时点击了.打开后,所选项目将重置为上一个项目.

这里发生了什么

该错误来自两个Firefox行为的交叉：

>当内容更改后的div :: div时,将重新计算div(及其子项)渲染.
> A< select>始终考虑他选择的项目(蓝色背景的项目)作为其当前值.

一步步 ：

>您点击< select>,打开菜单.
>鼠标翻过来< select>项目,连续被视为已选择.
>鼠标离开< div>,所以：

> ::内容更改后
>< div>内容重新计算
>< select>重置,因此显示处于关闭状态
>和…仍然选择了鼠标所在的最后一个元素

所以“视觉上封闭”< select>将最后选择的项目显示为已选中.没有触发JS事件.
但它不仅是一个视觉错误.在Firefox上,< select>当鼠标移过其项目时,会更改value(elem.value).

见fiddle

如何解决它

这是一个Firefox< select>行为,你不能做任何事情,除了在Js中创建自己的选择.

要防止< select>要在鼠标离开时关闭,请删除：

div[data-used="true"]::after:hover{
    content: "✖";
}
点赞