Hover Cursor CSS stops working once hovering over label or checkbox

Question

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>

yes!! thank you, I was looking for exactly something like this! — alex, Jan 28 '22 at 10:15

score 3 · Accepted Answer · answered Jan 27 '22 at 15:39

3

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

answered Jan 27 '22 at 15:39

Hakime Sheikhalishahi

71
1
3

score 1 · Answer 2 · answered Jan 27 '22 at 15:43

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; 
}

webworm84 · Answer 3 · 2022-01-27T16:39:52.410

i deleted the <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> 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 class="row form-check item fg_item fg_item_0" onclick="fachgebiet('edit', 0)">
    <div class="col-md-10 mb-0">
        <input type="checkbox" class="cursor" style="margin-left: 15px; margin-top:7px;"> Fachbereich A <br>
    </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>

Hover Cursor CSS stops working once hovering over label or checkbox

3 Answers3