在 CSS 中悬停时更改 Ionic 列表项的背景颜色

Question

我正在将 Ionic 框架用于移动 Web 应用程序。我试图在悬停时更改 Ionic 列表项的背景颜色，但它不会改变。

这是我的 html 中的内容：

        <ion-list>
            <ion-item ng-repeat="item in items" href="#/newpage">               
                <div>{{item.color}}</div>                       
            </ion-item>
        </ion-list>

这是 CSS 中的内容：

ion-item:hover {

    background-color: red;
    border-color: red;
}

边框颜色类型有效，但它只突出显示项目的左、上、右边框，而不是下边框。悬停时背景颜色根本不会改变。ion-item 中的 href 标签是否有可能禁用 CSS？如果我删除 href 标签，它工作正常。

我在网上寻求帮助，但没有找到解决此问题的方法或解释。任何帮助表示赞赏。谢谢。

Answer 1

使用 上的href属性ion-item将生成以下 HTML（为了清晰起见，删除了一些属性）：

<ion-item href="#/newpage">
  <a ng-href="#/newpage" target="_self" href="#/newpage">
    <div class="ng-binding">Something</div>
  </a>
</ion-item>

您需要更改a元素的背景颜色：

ion-item.item:hover a {
  background-color: slategray;
}

请注意，该.item部分用于为选择器提供更高的特异性。否则将使用默认背景颜色.item。

也可以用 解决!important，但我更喜欢前者：

ion-item:hover a {
  background-color: slategray !important;
}

设置边框样式比较棘手，因为列表元素根据列表中的位置（第一个、最后一个或其他）具有不同的边距。可以解决这个问题，但是当一个元素被悬停时，它会将相邻元素推动 1px。也许也可以解决这个问题，但它可能需要一堆新的 CSS。

另一种解决方案是使用 inset box-shadow 代替：

ion-item.item:hover a {
  background-color: slategray;
  box-shadow: inset 0px 0px 0px 1px red;
}

演示： http : //plnkr.co/edit/TCRbWhIQ6xJRx2qrgExs?p=preview