html – on`hover` – 如何在不同场景下处理子项`border-radius`

发布时间：2020-12-14 23:28:46 所属栏目：资源来源：网络整理

导读：我有一个带孩子的父母一个元素.当用户将鼠标悬停在我身上时,将子边框颜色更改为红色.有用. 我的问题是,孩子的长度不是静态的.它是动态的.我正在添加左边框半径的第一个和最后一个但是如何将右半径添加到第二个和最后一个？ (因为我不知道孩子的数量) .parent

我有一个带孩子的父母一个元素.当用户将鼠标悬停在我身上时,将子边框颜色更改为红色.有用.

我的问题是,孩子的长度不是静态的.它是动态的.我正在添加左边框半径的第一个和最后一个但是如何将右半径添加到第二个和最后一个？ (因为我不知道孩子的数量)

.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及更高版本.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!