在`hover`上-在不同情况下如何处理孩子`border-radius`？

user2024080 发表于 Dev

用户名

我有一个带有孩子a元素的父母。当用户mouse over我将子边框颜色更改为红色时。有用。

我的问题是，孩子的身长不是一成不变的。它是动态的。我加入左边框radius既first和last，但如何添加right-radius到second和last？（因为我不知道孩子的数目）

.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>

或正确的处理方式是什么？

阿拉希·斯瑞库玛（Arathi Sreekumar）

您可以使用以下内容，并且所有情况都应进行排序：

.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;
}