gpt4 book ai didi

html - 关于 `hover` - 如何在不同场景下处理子 `border-radius`?

转载 作者:太空狗 更新时间:2023-10-29 16:05:18 25 4
gpt4 key购买 nike

我有一个带有子 a 元素的父元素。当用户 鼠标悬停 时,我将子边框颜色更改为红色。它有效。

我的问题是, child 的长度不是静态的。它是动态的。我正在添加左边界 radius firstlast 但如何将 right-radius 添加到第二个最后一个? (因为我不知道 child 的数量)

.parent {
border:5px solid red;
display:inline-block;
position: relative;
border-radius:5px;
box-sizing:border-box;
margin-bottom:3em;
}

.parent a {
display:block;
padding:1em;
border-bottom:1px solid #ddd;
position: relative;
width:50%;
float:left;
box-sizing:border-box;
}

.parent a:nth-child(odd):hover{
border:5px solid #ddd;
margin: -5px;
}

.parent a:nth-child(even):hover{
border:5px solid #ddd;
margin: -5px;
left:10px;
}

.parent a:first-of-type{
border-top-left-radius:5px;
}

.parent a:last-of-type{
border-bottom-left-radius:5px;
}
<div class="parent">
<a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a>
</div>

<div class="parent">
<a href="#">1</a><a href="#">2</a><a href="#">3</a>
</div>

<div class="parent">
<a href="#">1</a>
</div>

或者什么是正确的处理方式?

最佳答案

您可以使用以下方法对所有案例进行排序:

.parent {
border:5px solid red;
display:inline-block;
position: relative;
border-radius:5px;
box-sizing:border-box;
margin-bottom:3em;
}

.parent a {
display:block;
padding:1em;
border-bottom:1px solid #ddd;
position: relative;
width:50%;
float:left;
box-sizing:border-box;
}

.parent a:nth-child(odd):hover{
border:5px solid #ddd;
margin: -5px;
}

.parent a:nth-child(even):hover{
border:5px solid #ddd;
margin: -5px;
left:10px;
}

.parent a:first-of-type{
border-top-left-radius:5px;
}

.parent a:nth-child(2) { /* second child */
border-top-right-radius:5px;
}

.parent a:last-of-type:nth-child(even){
border-bottom-right-radius:5px;
}

.parent a:last-of-type:nth-child(odd){
border-bottom-left-radius:5px;
}

.parent a:nth-last-child(2):nth-child(odd) {
border-bottom-left-radius: 5px;
}

这是一个 jsfiddle: https://jsfiddle.net/67hr0oax/4

这是一个删除了一些抖动的更新: https://jsfiddle.net/67hr0oax/7/

请注意:浏览器仅支持 IE9 及更高版本。

关于html - 关于 `hover` - 如何在不同场景下处理子 `border-radius`?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37985629/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com