好吧,我真的不确定如何表达我的问题,所以这里有两个屏幕截图可以帮助描述我的问题。第一个来自 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;
}
非常感谢任何帮助。
最佳答案
编辑:根据您的编辑更新,我想我现在知道您想要什么了:)
我不确定我是否理解您的问题,但请使用以下 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 以更好地理解效果。
希望有用。
关于html - iOS 网络应用程序 : Hover effect over border,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31878705/