Question

我在悬停时为选择框添加了特定颜色和边框。当您将鼠标悬停在选择上时，选项也会采用相同的颜色和边框。选项和选择都会在mouseout时返回到正常的css状态。有没有办法阻止选项继承选择框的悬停css？

我的HTML -

    <div class="roi-provider-list">
        <select id="providersList" class="roi-header-select">
            <option value="">All providers</option>
            <option value="7">BELL MOBILITY</option>
            <option value="32">ROGERS WIRELESS</option>
        </select>    
    </div>

CSS -

    select.roi-header-select:hover {
    background-image: url(../../Images/Icons/arrow_down_orange.png);
    background-color: #fff;
    border: 1px solid #f68c23;
    color: #f68c23;
    }

我也试过以下但无济于事 -

    select.roi-header-select:hover > option {
    border: 1px solid #c8d1d5;
    color: #102938;
    cursor: pointer;
    }

另外 -

    select.roi-header-select:hover option {
    border: 1px solid #c8d1d5;
    color: #102938;
    cursor: pointer;
    }

思考？

Answer 1

select.roi-header-select option:hover {
    your rules
}

在这里，您应该覆盖select中的所有规则。

Answer 2

你必须像这样添加100％宽度和高度：height: 100%; width: 100%;到悬停CSS

阻止继承select css的选项

2 个答案: