ul li内的按钮的悬停功能作为锚标记反应

Question

我无法使用<ul> <li>悬停并点击.. 在<li>标记内，我<button>标记了<a>标记 我希望将按钮标记中的相同悬停和点击功能仅作为锚点。

我的Css：

.custom-anchor:hover {
 color: #ffffff;
 background-color: #3276b1;
 text-decoration: none;
}

我的HTML：

<div class="btn-group">
    <button id="csr_duration_btn"
            class="btn dropdown-toggle btn-xs btn-success"
            data-toggle="dropdown">{{csrServiceModel.selectedDuration.name}}<i class="fa fa-caret-down"></i>
    </button>
    <ul id="comparision-chart-interval" class="dropdown-menu pull-right">
        <li data-ng-repeat="duration in csrServiceModel.durations">
            <button class="btn btn-link custom-anchor" data-ng-click="csrServiceModel.durationSelect(duration)" ng-disabled="duration.enabled">{{ duration.name }}</button>
        </li>
    </ul>
</div>

我尝试为<li>标记添加相同的自定义类，但它无法正常工作。

它应该像下图一样工作：

编辑：

你可以看到......某些选项在列表中被禁用..点击禁用选项列表是否有任何方法它不应该做任何事情..

如果单击禁用列表选项，我想阻止该事件。

请帮忙......

Answer 1

看起来格式化是使用bootstrap完成的。添加以下css规则：

#comparision-chart-interval li button {
    width:100%;
}