在不使用 table 的情况下使行在 Bootstrap 4 中具有悬停效果

Question

我想知道有没有办法让一行悬停在这里？我想指出我没有使用 table 来创建它，而是使用 Bootstrap 中的网格系统 4. 这可能吗？我研究过的所有内容都表明您需要创建一个 table 才能实现这一点。

 <div class="row">
        <div class="report-card-i report-card-i-height">
            <h3 class="m-l-35 p-t-25 p-b-10">Compliance</h3>
            <div class="fa-orange m-t-10 m-b-15 m-l-80">
                <div class="row">
                    <div class="col-sm-1 col-xs-1 text-center">
                        <i class="fa fa-star m-r-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>[=12=].00</p>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>4,012.23</p>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>[=12=].00</p>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>[=12=].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="m-l-35 p-t-25 p-b-10">Compliance</h3>
            <div class="fa-orange m-t-10 m-b-15 m-l-80">
                <div class="row mydiv">
                    <div class="col-sm-1 col-xs-1 text-center">
                        <i class="fa fa-star m-r-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>[=11=].00</p>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>4,012.23</p>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>[=11=].00</p>
                    </div>
                    <div class="col-sm-1 col-xs-2 col-lg-offset-1 text-center">
                        <p>[=11=].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 class:

的行

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

在不使用 table 的情况下使行在 Bootstrap 4 中具有悬停效果

Making a row to have hover effect in Bootstrap 4 without using a table

html

css

mousehover

bootstrap-4