CSS Hover влияет на детей, а не на родителей

Question

Я хочу изменить цвет фона 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">, но когда я наведусь на него. Дети <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;
        }

У меня болит голова, это так странно. Пожалуйста, помогите.

Answer 1

.collection-item :hover {
    background-color: lightblue;
}

изменить это на (убрать пробел между .collection-item и: hover)

.collection-item:hover {
    background-color: lightblue;
}

Answer 2

Возможно, Вам стоит добавить изменить свой код с:

.collection-item :hover {
    background-color: lightblue;
}

до

.collectionIsFocus .row :hover {
    background-color: lightblue !important;
}