【流程图里如何hover两个元素？ _hover 】

流程图里如何hover两个元素？

我也踩过这个坑( 3 )

已统计您的踩坑,无需重复点击

回答(2)

hover

详细描述

截图

代码

html部分：

<div class="container">
    <div class="row flowchart">
        
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
        
        <div class="col-xs-3 col-md-1 section section-1 ">

                <div class="line">1</div>    
                <div class="menu">1.选择箱型</div>

        </div>
        <div class="col-xs-3 col-md-1  section section-2">

                <div class="line">2</div>    
                <div class="menu">2.选择箱型</div>

        </div>
        <div class=" col-xs-3 col-md-1 section section-3">

                <div class="line">3</div>    
                <div class="menu">3.选择箱型</div>

        </div>
        <div class="col-xs-3 col-md-1 section section-4"> 

                <div class="line">4</div>    
            <div class="menu">4.选择箱型</div>
            
        </div>
    </div>
</div>


css部分：
.section{
    float: left;
}

.line{
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #dedede;
    position: relative;
    margin:30px 0;
    color: white;
    line-height: 10px;
    text-align: center;
    

}
.line::before{
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 50%;
    border-radius: 100%;
    background: #dedede;
    text-align: center;
    color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-15px, -15px);
    z-index: -1;
}

.section{
    padding: 0;
}

.section-1 .line{
    background: pink;
}
.section-1 .line::before{
    background: pink;
}

/* 流程图 */

编辑于2025-04-07

时间排序

热门排序

[深圳|结业弟子]JS-韩鹏
0

可以使用伪类选择器hover，hover后面空格再加上你要变色的元素，之后编辑样式就是hover的时候后面的元素发生的样式改变。比如：.father:hover.child{background-color:#f00;}就是父元素hover的时候，子元素变成红色。查看全部>

编辑于2018-10-19
[上海|结业弟子]JS-燕赤霞
0

.a:hover.b{background-color:#f00;} 查看全部>

编辑于2018-12-21

去第页