Html 在 CSS 中悬停时更改 Ionic 列表项的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28664768/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing background color of Ionic list item on hover in CSS
提问by user3226932
I am using the Ionic framework for a mobile web application. I'm trying to change the background color of an Ionic list item on hover, but it won't change.
我正在将 Ionic 框架用于移动 Web 应用程序。我试图在悬停时更改 Ionic 列表项的背景颜色，但它不会改变。
This is what's in my html:
这是我的 html 中的内容：
<ion-list>
<ion-item ng-repeat="item in items" href="#/newpage">
<div>{{item.color}}</div>
</ion-item>
</ion-list>
This is what's in the CSS:
这是 CSS 中的内容：
ion-item:hover {
background-color: red;
border-color: red;
}
The border color kind of works, but it only highlights the left, top, and right border of the item, not the bottom border. The background color does not change at all on hover. Is there a possibility that the href tag in the ion-item disables the CSS? If I remove the href tag, it works fine.
边框颜色类型有效，但它只突出显示项目的左、上、右边框，而不是下边框。悬停时背景颜色根本不会改变。ion-item 中的 href 标签是否有可能禁用 CSS？如果我删除 href 标签，它工作正常。
I've looked online for help, but no where have I found a solution or explanation to this problem. Any help is appreciated. Thanks.
我在网上寻求帮助，但没有找到解决此问题的方法或解释。任何帮助表示赞赏。谢谢。
回答by tasseKATT
Using the hrefattribute on the ion-itemwill generate the following HTML (stripped some attributes for clarity):
使用 上的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>
You need to change the background color for the aelement:
您需要更改a元素的背景颜色：
ion-item.item:hover a {
background-color: slategray;
}
Note that the .itempart is used to give the selector higher specificity. Otherwise the default background color for .itemwould be used instead.
请注意，该.item部分用于为选择器提供更高的特异性。否则将使用默认背景颜色.item。
Could also be solved with !important, but I prefer the former:
也可以用 解决!important，但我更喜欢前者：
ion-item:hover a {
background-color: slategray !important;
}
To style the border is trickier since the list elements have various margins depending on the position in the list (first, last or other). It's possible to counter this but it would push the adjacent elements 1px when one is hovered. Might be possible to solve this as well but it would probably require a bunch of new CSS.
设置边框样式比较棘手，因为列表元素根据列表中的位置（第一个、最后一个或其他）具有不同的边距。可以解决这个问题，但是当一个元素被悬停时，它会将相邻元素推动 1px。也许也可以解决这个问题，但它可能需要一堆新的 CSS。
An alternative solution is to use an inset box-shadow instead:
另一种解决方案是使用 inset box-shadow 代替：
ion-item.item:hover a {
background-color: slategray;
box-shadow: inset 0px 0px 0px 1px red;
}
回答by A.B
to Modify the background color of default ionic list items you will need to use these selectors with !important, it also depends whether you are using hrefproperty or not
要修改默认离子列表项的背景颜色，您需要将这些选择器与 一起使用!important，这也取决于您是否使用href属性
with href:
与href：
Changing the color of normal items
改变普通物品的颜色
.item-complex .item-content, .item{
background-color: #d8dfe6 !important;
}
and on hover
和悬停
.item-complex .item-content:hover{
background-color: red !important;
}
Without href:
没有href：
Changing the color of normal items
改变普通物品的颜色
.item{
background-color: #d8dfe6 !important;
}
and on hover
和悬停
.item:hover{
background-color: red !important;
}
回答by jjwilliams247
In Ionic 4 this is what worked for me using the --background-hovercss variable.
在 Ionic 4 中，这就是使用--background-hovercss 变量对我有用的方法。
#css
:host {
ion-item:hover {
--background-hover: #000000 #color of choice
}
}
#scss
:host {
ion-item {
&:hover {
--background-hover: #000000 #color of choice
}
}
}Hope this helps!
希望这可以帮助！
回答by feder
In Ionic 4, one updates the variables.scssrespectively the CSS custom property of the ion-item tag/component - if you want it to be customized for your entire app and not just a specifi item list. Otherwise append an id or class name.
在 Ionic 4 中，更新变量。scss分别是 ion-item 标签/组件的 CSS 自定义属性 - 如果您希望为整个应用程序定制它，而不仅仅是特定项目列表。否则附加一个 id 或类名。
ion-item:hover {
--background: #efefef;
}
Otherwise append an id or class name.
ion-item#myid:hoveror ion-item.myclass:hover
否则附加一个 id 或类名。
ion-item#myid:hover或者ion-item.myclass:hover
For others properties see: https://ionicframework.com/docs/api/item#css-custom-properties
对于其他属性，请参阅：https: //ionicframework.com/docs/api/item#css-custom-properties
Every Ionic tag has these properties to customize.
每个 Ionic 标签都有这些属性可以自定义。
