CSS - 鼠标移入整行高亮显示，适用于会员套餐各参数对比页面（display: table，div 转表格形式）

news2024/11/15 1:59:14

效果图

可根据基础示例和进阶示例，复制进行改造样式。

如下图所示，本文提供 2 个示例。

在这里插入图片描述

基础示例

找个 HTML 页面，一键复制运行。

<body>
    <h1 style="text-align: center;">基础示例</h1>
    <section class="content">
        <div class="row">
            <div class="cell">张三</div>
            <div class="cell">李四</div>
            <div class="cell">王五</div>
        </div>
        <div class="row">
            <div class="cell">张三</div>
            <div class="cell">李四</div>
            <div class="cell">王五</div>
        </div>
    </section>
</body>

<style>
body {
    background: #eeeeee;
}
/* 根节点 */
.content {
    display: table;
    /*display: table时padding会失效*/
    width: 800px;
    margin: 0 auto;
    background: #fff;
}
/* 每行 */
.row {
    display: table-row;
    /*display: table-row时margin、padding同时失效*/
    /* background: red; */
    text-align: center;
}
.row:hover {/* 这里写鼠标移入时的样式 */
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    font-weight: bold;
}
/* 每列 */
.cell {
    display: table-cell;
    /*display: table-cell时margin会失效*/
    padding: 15px;
}
</style>

进阶示例

找个 HTML 页面，一键复制运行。

<body>
    <h1 style="text-align: center;">进阶示例</h1>
    <section class="content">

        <!-- 头部自定义内容 -->
        <div class="row-hidden">
            <div class="cell">
                <div class="header">
                    <h3>普通会员</h3>
                    <button class="button">立即开通</button>
                    <div style="height: 20px;"></div>
                </div>
            </div>
            <div class="cell">
                <div class="header">
                    <h3>中级会员</h3>
                    <button class="button">立即开通</button>
                    <div style="height: 20px;"></div>
                </div>
            </div>
            <div class="cell">
                <div class="header">
                    <h3>高级会员</h3>
                    <button class="button">立即开通</button>
                    <div style="height: 20px;"></div>
                </div>
            </div>
        </div>
        <!-- END -->

        <!-- 激活高亮区域 -->
        <div class="row">
            <div class="cell">
                <div class="item">
                    [普通会员] 这是第一行
                </div>
            </div>
            <div class="cell">
                <div class="item">
                    [中级会员] 这是第一行
                </div>
            </div>
            <div class="cell">
                <div class="item">
                    [高级会员] 这是第一行
                </div>
            </div>
        </div>
        <div class="row">
            <div class="cell">
                <div class="item">
                    [普通会员] 这是第二行
                </div>
            </div>
            <div class="cell">
                <div class="item">
                    [中级会员] 这是第二行
                </div>
            </div>
            <div class="cell">
                <div class="item">
                    [高级会员] 这是第二行
                </div>
            </div>
        </div>
        <!-- END -->

        <!-- 底部自定义内容 -->
        <div class="row-hidden">
            <div class="cell">
                <div class="bottom">
                    <div style="height: 10px;"></div>
                    <h3>底部内容</h3>
                </div>
            </div>
            <div class="cell">
                <div class="bottom">
                    <div style="height: 10px;"></div>
                    <h3>底部内容</h3>
                </div>
            </div>
            <div class="cell">
                <div class="bottom">
                    <div style="height: 10px;"></div>
                    <h3>底部内容</h3>
                </div>
            </div>
        </div>
        <!-- END -->

    </section>
</body>

<style>
body {
    background: #eeeeee;
}
/* 根节点 */
.content {
    display: table;
    /*display: table时padding会失效*/
    width: 1300px;
    margin: 0 auto;
    border-collapse: collapse;
}
/* 每行 */
.row {
    display: table-row;
    /*display: table-row时margin、padding同时失效*/
    text-align: center;
}
.row-hidden {
    display: table-row;
    /*display: table-row时margin、padding同时失效*/
    text-align: center;
}
.row:hover {/* 这里写鼠标移入时的样式 */
    font-weight: bold;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    cursor: pointer;
    color: red;
}
/* 每列 */
.cell {
    display: table-cell;
    /*display: table-cell时margin会失效*/
    /* 这行代码是为了侧边留空隙使用,同背景色一致造成的假象 */
    border-right: 10px solid #eeeeee;
}


/* 额外样式 */
.item {
    /* padding */
    background: #fff;
    text-align: left;
    padding-left: 30px;
    padding-right: 30px;
    /* padding-left: 35px; */
    padding-bottom: 10px;
    padding-top: 10px;
}
.header {
    background: #fff;
    padding: 20px;
}
.button {
    width: 90%;
    height: 30px;
}
.bottom {
    background: #fff;
    padding: 20px;
}
</style>