悬停光标CSS一旦悬停在标签或复选框上就会停止工作[重复]答案

【问题标题】：Hover Cursor CSS stops working once hovering over label or checkbox [duplicate]悬停光标CSS一旦悬停在标签或复选框上就会停止工作[重复]
【发布时间】：2022-01-28 00:39:52
【问题描述】：

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

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

【问题讨论】：

是的！谢谢，我正在寻找这样的东西！

标签： html css hover label

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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>

【讨论】：