[英]CSS Hover Affect Children Only Not The Parent
I want to change the div
background color when hovering: 我想在悬停时更改
div
背景颜色:
<div ng-show="collectionIsFocus">
<div ng-if="collections" ng-repeat="c in collections">
<div class="row collection-item">
<div class="col-8 collection-item-col">
<p>{{c.Name}}</p>
</div>
<div class="col-4 collection-item-col" ng-if="c.Image">
<img src="{{c.Image.Url}}" />
</div>
</div>
</div>
</div>
I want to change the background color for <div class="row collection-item">
, but when I hover into it. 我想更改
<div class="row collection-item">
的背景颜色,但是当我将鼠标悬停在它上面时。 The children <div class="col-8 collection-item-col">
or <div class="col-4 collection-item-col" ng-if="c.Image">
got the background color changed and the parent is not. 子
<div class="col-8 collection-item-col">
或<div class="col-4 collection-item-col" ng-if="c.Image">
的背景色已更改,父级不是。
This is the css: 这是CSS:
.collection-item {
cursor:pointer;
height:50px;
max-height:50px;
overflow:hidden;
}
.collection-item :hover {
background-color: lightblue;
}
.collection-item img {
max-width: 100%;
pointer-events: none !important;
}
.collection-item p {
pointer-events: none !important;
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.collection-item .collection-item-col {
height: 50px;
max-height: 50px;
}
My head hurts, this is so weird. 我的头很痛,这太奇怪了。 Please help.
请帮忙。
.collection-item :hover {
background-color: lightblue;
}
change this to(remove space between .collection-item and :hover) 更改为(删除.collection-item和:hover之间的空间)
.collection-item:hover {
background-color: lightblue;
}
Perhaps, You should add change your code from: 也许,您应该从以下位置添加更改代码:
.collection-item :hover {
background-color: lightblue;
}
to 至
.collectionIsFocus .row :hover {
background-color: lightblue !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.