Javascript “我的表格中的悬停效果”复选框

您好，我的表中有复选框，当我将鼠标悬停在我的表行时，我的复选框将出现。我的问题是，当用户选中复选框时，如何永久显示复选框

这是我的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;
}

---

{{invoice\u detail.id}

在这一行的复选框的

类中做什么：

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不起作用的问题吗？
我将我的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;
}

为什么不直接给出呈现的HTML呢？这里没有技巧。必须有
javascript
，它还设置元素的
display
。单独使用
css
可以呈现预期的结果。你还没有澄清你所说的“永久”是什么意思。选中时是否显示
元素？如果是，
javascript
不是满足要求所必需的。如果您确定没有javascript。。。现在！自从你粘贴了一些代码之后，以前就没有了。因此，请尝试清空浏览器缓存，然后重试。您现在的问题没有可复制的问题。@wiwiwit“尝试在div上使用table not it not working in my table”请参见，您是否在每行上多次使用相同的
id
？这可能是一个失败的原因。其他的在
div
或表行中显示/隐藏复选框完全没有区别。Id和class是引用。根据定义，ID在整个网页中必须是唯一的（如您的驾照号码）。和类用于引用元素组。就是这样。所以如果你使用一个循环代码在一个表中生成1253行。。。使用类。避免循环中的ID。如果多次使用同一个id，JavaScript将捕获第一个id，并在那里停止查找。我不知道CSS对多个相同的ID做了什么。。。但它也失败了。我现在真的很困惑，我试图删除我的md，只是简单的html，它在那里工作；）！它是否也适用于您的项目？？？？为什么？它应该和你原来的CSS一起工作，用
#
替换成
是的，这让我很困惑，但是我的高级程序员说总是使用类而不是id，我不知道为什么我只是按照指示去做。我想你现在是在跟我开玩笑。就像你在小提琴上做的那样。你知道你最初的问题是什么。在尝试通过更改不需要的内容来创建新的api之前，请先修复它。我无法复制整个内容，我不知道如何将rest api放入我的JSFIDDLE中对不起，但我想我无能为力。我不习惯使用角度API或RESTAPI。我想我回答了关于复选框不受CSS影响的问题，因为您使用了CSS或ID。这显然是一个很难找到的问题。