Hover Cursor CSS stops working once hovering over label or checkbox-CodePudding

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  onclick="fachgebiet('edit', 0)">
                    <div >
                        <input name="fachgebiete[0][id]" value="1"  id="fg_item_0" type="checkbox">
                        <label >Fachbereich A</label>
                    </div>
                    <div >
                        <button type="button"  onclick="fachgebiet('del', 0)"><i  aria-hidden="true"></i></button>
                    </div>
</div>

CodePudding user response：

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

CodePudding user response：

If you want to change you cursor to "pointer", when you hover over you checkbox or label. Then you should add hover style on input and label in css. After doing this you code will looks like this.

.item:hover, 
input.form-check-input, 
label.form-check-label {
background-color: #e4e8eb; 
border-radius: 10px; 
cursor: pointer; 
}

CodePudding user response：

i deleted the <input name="fachgebiete[0][id]" value="1" id="fg_item_0" type="checkbox"> <label >Fachbereich A</label> codes . instead, I added the following codes below and got this result. I hope it works for you.

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

.cursor {
  cursor: pointer;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="style.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  onclick="fachgebiet('edit', 0)">
    <div >
        <input type="checkbox"  style="margin-left: 15px; margin-top:7px;"> Fachbereich A <br>
    </div>
    <div >
        <button type="button"  onclick="fachgebiet('del', 0)"><i 
                aria-hidden="true"></i></button>
    </div>
</div>