Question

嗨我的桌子上有复选框，当我将鼠标悬停在桌面上时，我的复选框就出现了。我的问题是当用户选中框

时，如何永久显示我的复选框

这是我的HTML

table.md-table
    thead
      tr.md-table-headers-row.lr
        th.md-table-header.header_check_box
          md-checkbox.md-mr-0 ng-model="allSelected" ng-click="ctrl.toggleAll()" ng-hide="!ctrl.calculateChecked()"
        th.md-table-header.unit Unit
        th.md-table-header Product Description
        th.md-table-header Date of Expiration
        th.md-table-header Quantity
        th.md-table-header Discount
        th.md-table-header Unit Amount
        th.md-table-header Tax
        th.md-table-header Total Amount
    tbody
      tr.md-table-content-row class="DivForHoverItem" ng-repeat="invoice_detail in ctrl.invoice_details | orderBy: 'product.name'" style="border-bottom: 1px solid rgb(230, 230, 230);"
        td.md-table-content.check_box
          md-checkbox.md-mr-0 type="checkbox" class="HiddenCheckBox-{{invoice_detail.id}}" ng-model="invoice_detail.checked"
        td.md-table-content.unit
          | {{ invoice_detail.product.unit}}
        td.md-table-content.product_name
          | {{ invoice_detail.remarks}}
        td.md-table-content
          | {{ invoice_detail.date_of_expiration | date: ' MMMM d, y' }}
        td.md-table-content
          | {{ invoice_detail.qty }}
        td.md-table-content
          | {{ invoice_detail.discount || 0 | number}}%
        td.md-table-content.unit_amount
          | {{ invoice_detail.unit_amount | number: 2}}
        td.md-table-content
          | {{ invoice_detail.product.tax_exempt == true? 'Tax Exempted':'Not Tax Exempted' }}
        td.md-table-content.amount
          | {{ invoice_detail.amount | number: 2 }}

这是我的css

#HiddenCheckBox {
    display: none;
}
#DivForHoverItem:hover #HiddenCheckBox {
    display:block;
}
#HiddenCheckBox:checked {
    display:block;
}

Answer 1

{{invoice_detail.id}}在此行的复选框class中执行的操作是什么：

md-checkbox.md-mr-0 type="checkbox" class="HiddenCheckBox-{{invoice_detail.id}}" ng-model="invoice_detail.checked"
    td.md-table-content.unit

您的CSS定义为显示或隐藏.HiddenCheckBox
（你在评论中告诉我......即使你没有在你的问题中更新它）

因此，如果Angular产生类似HiddenCheckBox-345，HiddenCheckBox-346，HiddenCheckBox-347的类......你认为这可能是你关于CSS无效的问题吗？

Answer 2

我将我的CSS更新为此

md-checkbox.md-mr-0.HiddenCheckBox {
display: none;
}

tr.md-table-content-row.DivForHoverItem:hover md-checkbox.md-mr-0.HiddenCheckBox  {
display: block;
}


md-checkbox.md-mr-0.HiddenCheckBox.ng-valid.ng-dirty.ng-valid-parse.ng-touched.md-checked.ng-not-empty {
display: block;
}

在我的表格中悬停效果复选框

2 个答案: