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

【问题标题】：iOS Web App: Hover effect over borderiOS Web App：边框上的悬停效果
【发布时间】：2015-08-07 13:15:35
【问题描述】：

好的，我真的不知道如何表达我的问题，所以这里有两个屏幕截图可以帮助描述我的问题。第一个来自 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;
}

非常感谢任何帮助。

【问题讨论】：

jsfiddle.net/abhitalks/ntest0tb/2

标签： html css web-applications

【解决方案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 以更好地理解效果。

希望有用。

【讨论】：