Hover Cursor CSS 一旦悬停在 ZD304BA20E96D87411588EEABAC850E3Z 上就会停止工作

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>

Answer 1

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

Answer 2

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

Answer 3

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>