html – 悬停如何使我的孩子边界与父边界重叠？

发布时间：2020-12-14 21:34:30 所属栏目：资源来源：网络整理

导读：我有一个红色边框的父母。当用户徘徊在孩子身上时，我正在尝试改变孩子的边框与父母重叠。我该如何实现？ .parent{ border:1px solid red; display:inline-block;}.parent a { display:block; padding:1em; border-bottom:1px solid #ddd;}.parent a:hover{

我有一个红色边框的父母。当用户徘徊在孩子身上时，我正在尝试改变孩子的边框与父母重叠。我该如何实现？

.parent{
  border:1px solid red;
  display:inline-block;
}

.parent a {
  display:block;
  padding:1em;
  border-bottom:1px solid #ddd;
}

.parent a:hover{
  border:1px solid #ddd;
}

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

解决方法

只要你知道边框的宽度，并且能够使用相对定位…为了清楚起见，我夸大了这边的边界。

.parent {
  border:5px solid red;
  display:inline-block;
  position: relative;
}

.parent a {
  display:block;
  padding:1em;
  border-bottom:1px solid #ddd;
  position: relative;
}

.parent a:hover{
  border:5px solid #ddd;
  margin: -5px;
}

https://jsfiddle.net/kd0gf31z/

（编辑：李大同）

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