3
Borders Overlapped in Grid Layout
source link: https://www.itwork.club/2021/05/14/grid-border-overlap/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Borders Overlapped in Grid Layout
May 14, 2021CSS3点击
The borders overlapped when I created a Grid layout with bordered item.
I found a way to resolve this after tried several ways in different blos (none of them works).
Here’s the codes:
// Container
.templates {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, auto));
}
// Item
.adventure_challenge_list_main .template_item {
position: relative;
&::after {
content: '';
position: absolute;
top: -1px;
right: 0px;
bottom: 0px;
left: -1px;
border: 1px solid #c4c4c4;
}
&:hover {
&::after {
z-index: 1;
border: 2px solid #2193F0;
}
}
}
Yes, I use the ::after style to make the item border, and change the border color when hovering item.
Notice that the position of ::after element must be top: -1; and left: -1;, so that the border between two item will not be overlapped.
The z-index style of hovered element is to cover the original border color.
原文作者: dgb8901,yinxing
原文链接: https://www.itwork.club/2021/05/14/grid-border-overlap/
版权声明: 转载请注明出处
体验小程序「简易记账」
关注公众号「特想学英语」
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK