我有一个带孩子的父母一个元素.当用户将鼠标悬停在我身上时,将子边框颜色更改为红色.有用.
我的问题是,孩子的长度不是静态的.它是动态的.我正在添加左边框半径的第一个和最后一个但是如何将右半径添加到第二个和最后一个? (因为我不知道孩子的数量)
.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及更高版本.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。