如何在悬停时更改表格行的颜色

Question

我试图在悬停时更改表格行的颜色.通过使用row:hover,但通过这种方式它只是悬停在一个明显的特定细胞.但是当我尝试使用时row cell: hover,它没有任何效果.这是我的HTML.

JSfiddle:https://jsfiddle.net/f4ojhxco/2/

 <div id="table">
  <div class="header-row row">
<span class="cell">SI. No.</span>
    <span class="cell">Application Date</span>
    <span class="cell">Customer Name</span>
    <span class="cell">Loan Amount</span>
    <span class="cell">Loan Status</span>
    <span class="cell">Action</span>
  </div>
<div class="row" *ngFor="let item of customerList ; let i= index;">
    <input type="radio" name="expand">
<span class="cell" data-label="SI. No.">{{i+1}}</span>
<span class="cell" data-label="Application Date">{{item.date}}</span>
<span class="cell" data-label="Customer Name">
  {{item.name}}</span>
<span class="cell" data-label="Loan Amount">{{item.amount}}</span>
<span class="cell" data-label="Loan Status">{{item.status}}</span>
<span class="cell" data-label="Action">
  <a href="https://www.w3schools.com">More Details</a>
</span>
  </div>
</div>

Answer 1

通过删除类.row和之间的空格来给出如下样式:hover.

.row:hover {
    background: green;
}