html - iOS 网络应用程序 : Hover effect over border

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 进行检查:

* { 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;
}

<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>

我切换到 :hover 以更好地理解效果。

希望有用。