【问题标题】:Changing background color of Ionic list item on hover in CSS在 CSS 中悬停时更改 Ionic 列表项的背景颜色
【发布时间】:2020-07-11 01:09:08
【问题描述】:

我正在将 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 标签,它工作正常。

我已在网上寻求帮助,但我在哪里找不到此问题的解决方案或解释。任何帮助表示赞赏。谢谢。

【问题讨论】:

    标签: html angularjs css ionic-framework


    【解决方案1】:

    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;
    }
    

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

    【讨论】:

      【解决方案2】:

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

      href:

      改变普通物品的颜色

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

      悬停时

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

      没有href

      改变普通物品的颜色

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

      悬停时

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

      【讨论】:

        【解决方案3】:

        在 Ionic 4 中,使用 --background-hover css 变量对我有用。

        #css
        :host {
          ion-item:hover { 
            --background-hover: #000000 #color of choice 
          }
        }
        
        #scss
        :host {
          ion-item {
            &:hover {
              --background-hover: #000000 #color of choice
            }
          }
        }

        希望这会有所帮助!

        【讨论】:

        • 这是 Ionic 所有新(er|est)版本(当前为 v6.x)的正确答案。
        【解决方案4】:

        在 Ionic 4 中,会更新变量。scss 分别是 ion-item 标签/组件的 CSS 自定义属性 - 如果您希望它为您的整个应用程序定制,而不仅仅是一个特定的项目列表。否则附加一个 id 或类名。

        ion-item:hover {
          --background: #efefef;
        }
        

        否则附加一个 id 或类名。 ion-item#myid:hoverion-item.myclass:hover

        其他属性见:https://ionicframework.com/docs/api/item#css-custom-properties

        每个 Ionic 标签都有这些属性可以自定义。

        【讨论】:

          【解决方案5】:

          2020 年 10 月 7 日

          Ionic 5 / Capacitor这对我有用:

          html

          <ion-menu-toggle autoHide="false" *ngFor="let p of appPages; let i = index">
          
                  <ion-item (click)="selectedIndex = i" [class.selected]="selectedIndex == i" button="true"
                    (click)="goToPage(p)" class="my-hover">
          
                    <ion-icon slot="start" [name]="p.ionicIcon? p.ionicIcon: ''"></ion-icon>
                    <ion-label>
                      {{p.title}}
                    </ion-label>
          
                  </ion-item>
          
                </ion-menu-toggle> 
          

          css

          ion-item {
            --background-hover: var(--ion-color-primary);
          }
          

          【讨论】:

            猜你喜欢
            • 2022-12-03
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2012-05-16
            • 2015-02-20
            • 2023-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多