的z-index或焦點問題與引導下拉

Question

我試圖解決這個頁面上惱人的錯誤 - https://www.minimoda.bg/products/4/zimna-detska-pletena-roklq-rozova

您從下拉列表中選擇一個尺寸（大小對價格的右邊的那一刻），然後將圖片懸停在左側（項目圖片），所選尺寸將顯示在縮放預覽的頂部。 但是，如果在選擇大小後，您可以在頁面上的某個地方單擊，然後將鼠標懸停在圖片上 - 即可。就像是否還有一些焦點狀態。

任何援助是值得歡迎的，因爲我花了數小時試圖修復它沒有成功。

Answer 1

這是引導選擇造成您的問題...

.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> 

不要修改引導選擇。取而代之的是自定義類添加到您的按鈕，像這樣......

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

...在你的自定義CSS使用相同的選擇設置z-index到0，但包括自定義類的名字。這將增加特異性並適當地覆蓋。

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