<div class="nav">
            <div class="nav-item">
                <i>点菜</i>
            </div>
            <div class="nav-item">
                <i>评论</i> 
            </div>
            <div class="nav-item">
                <i>商家</i> 
            </div>
        </div>

.nav{
    display: block;
    height: 2.1rem;
    border-bottom: .025rem solid #f8f8f8;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.nav-item{
    flex: 1;
}
.nav-item i{
    box-sizing: border-box;
    display: block;
    width: 2.75rem;
    height:2.1rem;
    line-height: 2.1rem;
    
    text-align: center;
    font-size: .7rem;
    margin:0 auto;
}
.nav-item i:hover{
    border-bottom: .025rem solid #ffd161;
}

问提描述：

    :hover在chrome浏览器下测试时，当移动端测试时，没有作用,但单击时，会出现效果。。当PC端测试时，hover才起作用。

自己测试过的解决方案：

    １. 在body中，加上了ontouchstart事件 ，但不起作用。

    2.  把link,visited,hover ,actived 按顺序写了，不起作用。