iOS Web App：边框上的悬停效果

Question

好吧，我真的不确定如何说出我的问题，所以这里有两个截图有助于描述我的问题。第一个来自iOS中的“设置”应用。这是我想要的点击行为：

现在这就是我所拥有的。注意上边框如何伸出一个像素。

我准备了JSFiddle我的HTML标记和CSS。

<div class="group">
    <div class="item">
        <p>Hello World</p>
        <div class="separator"></div>
    </div>
    <div class="item active">
        <p>Hello World</p>
        <div class="separator"></div>
    </div>

    <div class="item">
        <p>Hello World</p>
        <div class="separator"></div>
    </div> 
</div>

CSS：

* { margin: 0; padding: 0 }

.group {
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
}

.separator {
    height: 1px;
    border-bottom: 1px solid grey;
    margin-left: 15px;
}

.item:last-child .separator {
    display: none;
}

.item.active {
    background-color: lightgrey;
}

非常感谢任何帮助。

Answer 1

编辑：从你的编辑更新，我想我现在知道你想要什么：）

我不确定我是否理解了您的问题，但请查看此CSS：

＆＃13;

＆＃13;

* { margin: 0; padding: 0 }

.group {
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
}

.separator {
    height: 1px;
    border-bottom: 1px solid lightgrey;
    margin-left: 15px;
    padding-bottom: 1px;
    margin-bottom:-1px;
}

.item:last-child .separator {
    display: none;
}

.item:hover {
    background-color: lightgrey;
}

＆＃13;

<div class="group">
    <div class="item">
        <p>Hello World</p>
        <div class="separator"></div>
    </div>
        
   <div class="item active">
        <p>Hello World</p>
        <div class="separator"></div>
    </div>
    
    <div class="item">
        <p>Hello World</p>
        <div class="separator"></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我切换到：悬停以更好地了解效果。

希望它有用。