引导下拉列表的z-index或焦点问题

Question

我试图在此页面上修复一个恼人的错误 - https://www.minimoda.bg/products/4/zimna-detska-pletena-roklq-rozova

当您从下拉列表中选择尺寸（尺寸位于价格的右侧）并将图片悬停在左侧（项目图片）时，所选尺寸将显示在缩放预览的顶部。 但是，如果在选择尺寸后，单击页面上的某个位置然后将图片悬停 - 它就可以了。就像有一些焦点状态一样。

欢迎任何帮助，因为我花了几个小时试图修复它而没有成功。

Answer 1

这是引发问题的Bootstrap选择器......

.btn-group > .btn:focus { z-index: 2; }

它被应用于此按钮......

<button type="button"
        class="btn dropdown-toggle btn-default"
        data-toggle="dropdown"
        title="2-3 години (92-98 см)"
        aria-expanded="false">
  <span class="filter-option pull-left">2-3 години (92-98 см)</span>
  &nbsp;
  <span class="bs-caret">
    <span class="caret"></span>
  </span>
</button>

不要修改Bootstrap选择器。而是在按钮中添加自定义类，如此...

<button ... class="btn dropdown-toggle btn-default example" ...>
  ...
</button>

...并在您的自定义CSS中使用相同的选择器将z-index设置为0，但包含您的自定义类名称。这将增加特异性并适当地覆盖。

.btn-group > .btn.example:focus { z-index: 0; }