在不使用表格的情況下在 Bootstrap 4 中制作一行以具有懸停效果

Question

我想知道是否有辦法在此處懸停一排？ 我想指出我不是使用表格來創建它，而是使用 Bootstrap 4 中的網格系統。它甚至可能嗎？ 我研究的所有內容都表明您需要創建一個表才能實現這一點。

 <div class="row"> <div class="report-card-i report-card-i-height"> <h3 class="ml-35 pt-25 pb-10">Compliance</h3> <div class="fa-orange mt-10 mb-15 ml-80"> <div class="row"> <div class="col-sm-1 col-xs-1 text-center"> <i class="fa fa-star mr-15 text-center" style="font-weight: bold">Adjustment</i> </div> <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center"> <p>21,922</p> </div> <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center"> <p>$0.00</p> </div> <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center"> <p>$304,012.23</p> </div> <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center"> <p>$0.00</p> </div> <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center"> <p>$0.00</p> </div> <div class="col-sm-1 col-xs-1 text-center"> <i class="fa fa-angle-right text-center" style="font-weight: bold"></i> </div> </div> </div> </div>

Answer 1

 .mydiv div:hover{background-color:gray;}

 <div class="row"> <div class="report-card-i report-card-i-height"> <h3 class="ml-35 pt-25 pb-10">Compliance</h3> <div class="fa-orange mt-10 mb-15 ml-80"> <div class="row mydiv"> <div class="col-sm-1 col-xs-1 text-center"> <i class="fa fa-star mr-15 text-center" style="font-weight: bold">Adjustment</i> </div> <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center"> <p>21,922</p> </div> <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center"> <p>$0.00</p> </div> <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center"> <p>$304,012.23</p> </div> <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center"> <p>$0.00</p> </div> <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center"> <p>$0.00</p> </div> <div class="col-sm-1 col-xs-1 text-center"> <i class="fa fa-angle-right text-center" style="font-weight: bold"></i> </div> </div> </div> </div>

Answer 2

我會改變

<div class="fa-orange m-t-10 m-b-15 m-l-80">
    <div class="row">

到

<div class="fa-orange m-t-10 m-b-15 m-l-80">
    <div class="row highlight">

以便以下 css 選擇器僅針對具有.highlight類的行：

.row.highlight:hover > * {
    background-color: #123456;
}