首页 文章

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

提问于
浏览
1

我正在将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 回答

  • 3

    使用 ion-item 上的 href 属性将生成以下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 .

    另一种解决方案是使用插入框阴影:

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

    Demo: http://plnkr.co/edit/TCRbWhIQ6xJRx2qrgExs?p=preview

  • 2

    要修改默认离子列表项的背景颜色,您需要将这些选择器与 !important 一起使用,这还取决于您是否使用 href 属性

    with href:

    改变普通物品的颜色

    .item-complex .item-content, .item{
        background-color: #d8dfe6 !important;
    }
    

    并悬停

    .item-complex .item-content:hover{
        background-color: red !important;
    }
    

    Without href:

    改变普通物品的颜色

    .item{
        background-color: #d8dfe6 !important;
    }
    

    并悬停

    .item:hover{
        background-color: red !important;
    }
    

相关问题