我想更改 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>
我想更改 <div class="row collection-item">
的背景颜色,但是当我将鼠标悬停在其中时。 children <div class="col-8 collection-item-col">
或 <div class="col-4 collection-item-col" ng-if="c.Image">
改变了背景颜色,但父级没有。
这是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;
}
我的头好痛,这太奇怪了。请帮忙。
最佳答案
.collection-item :hover {
background-color: lightblue;
}
将其更改为(删除 .collection-item 和 :hover 之间的空格)
.collection-item:hover {
background-color: lightblue;
}
关于html - CSS Hover 只影响 child 而不影响 parent ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56036452/