我正在将Ionic框架用于移动Web应用程序 . 我正在尝试在悬停时更改离子列表项的背景颜色,但它不会更改 .
这是我的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;
}
边框颜色类型有效,但它只突出显示项目的左边框,上边框和右边框,而不是底部边框 . 悬停时背景颜色根本不会改变 . 离子项中的href标签是否有可能禁用CSS?如果我删除href标签,它工作正常 .
我在网上寻求帮助,但没有找到解决方案或解释这个问题的地方 . 任何帮助表示赞赏 . 谢谢 .
2 回答
使用
ion-item
上的href
属性将生成以下HTML(为清晰起见,剥离了一些属性):您需要更改
a
元素的背景颜色:请注意,
.item
部分用于为选择器提供更高的特异性 . 否则,将使用.item
的默认背景颜色 .也可以用
!important
解决,但我更喜欢前者:设置边框的方式比较复杂,因为列表元素具有各种边距,具体取决于列表中的位置(第一个,最后一个或其他) . 可以对抗这种情况,但是当一个人徘徊时它会推动相邻元素1px . 也许有可能解决这个问题,但它可能需要一堆新的CSS .
另一种解决方案是使用插入框阴影:
Demo: http://plnkr.co/edit/TCRbWhIQ6xJRx2qrgExs?p=preview
要修改默认离子列表项的背景颜色,您需要将这些选择器与
!important
一起使用,这还取决于您是否使用href
属性with href:
改变普通物品的颜色
并悬停
Without href:
改变普通物品的颜色
并悬停