我有一个带孩子的父母一个元素.当用户将鼠标悬停在我身上时,将子边框颜色更改为红色.有用.
我的问题是,孩子的长度不是静态的.它是动态的.我正在添加左边框半径的第一个和最后一个但是如何将右半径添加到第二个和最后一个？ (因为我不知道孩子的数量)
.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;
}
或者处理这个问题的正确方法是什么？
最佳答案
您可以使用以下内容,并且应对所有案例进行排序：
.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及更高版本.
