Hover Cursor CSS stops working once hovering over label or checkbox

I have a div, which has a CSS that changes the background and cursor when hovered over. However within that div are a checkbox with a label. Once hovering over either of those, the background remains changed, but the cursor returns to default. How do I fix this?

.item:hover
{
    background-color: #e4e8eb;
    border-radius: 10px;
    cursor: pointer !important;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
                   
                   
                   
<div class="row form-check item fg_item fg_item_0" onclick="fachgebiet('edit', 0)">
                    <div class="col-md-10 mb-0">
                        <input name="fachgebiete[0][id]" value="1" class="form-check-input fg_item_0 fg_id" id="fg_item_0" type="checkbox">
                        <label class="form-check-label">Fachbereich A</label>
                    </div>
                    <div class="col-md-2 mb-0">
                        <button type="button" class="btn btn-danger" onclick="fachgebiet('del', 0)"><i class="fa fa-minus" aria-hidden="true"></i></button>
                    </div>
</div>

Solution

.item:hover {
  background-color: #e4e8eb;
  border-radius: 10px;
}
.item *:hover {
  cursor: pointer;
}