一旦悬停在标签或复选框上，悬停光标 CSS 就会停止工作

Question

我有一个 div，它有一个 CSS，当悬停在上面时会改变背景和光标。但是，在 div 中有一个带有标签的复选框。一旦将鼠标悬停在其中任何一个上，背景将保持更改，但光标 returns 为默认值。我该如何解决这个问题？

.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

如果您想将光标更改为“指针”，当您将鼠标悬停在复选框或标签上时。然后你应该在 css 中的输入和标签上添加悬停样式。完成此操作后，您的代码将如下所示。

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

Answer 3

我删除了 <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> 代码。相反，我在下面添加了以下代码并得到了这个结果。希望对你有用。

.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>

一旦悬停在标签或复选框上，悬停光标 CSS 就会停止工作

Hover Cursor CSS stops working once hovering over label or checkbox

html

css

hover

label