为什么将过渡应用到 <a> 元素时，同级元素和父元素都会移动？

Question

article,
aside,
figure,
footer,
header,
hgroup,
nav,
section,
details,
summary {
  display: block;
}
section.body-wrapper {
  position: relative;
  background-color: teal;
  width: 100%;
  min-width: 960px;
}
div.fixed-width {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 10px;
}
.everything-wrapper p.desc-para {
  font-size: 18px;
  width: 460px;
  margin: 0 auto;
  padding: 40px 0px 27px;
}
div.links-wrapper {
  background-color: black;
  padding: 20px 0px 50px;
  margin: 0 auto;
  display: table;
  border-collapse: separate;
  border-spacing: 25px;
}
.a-link {
  display: table-cell;
  text-decoration: none;
}
div.the-div {
  font: 0px/0 a;
  border: coral 2px solid;
  height: 140px;
  width: 140px;
  transition: all 0.3s ease 0s
}
.the-div:hover {
  background-color: grey;
  border: coral 6px solid;
}
.caption {
  font-family: sans-serif;
  font-size: 14px;
  padding-top: 20px;
  text-align: center;
  color: white;
  font-weight: 100;
  transition: all 0.3s ease 0s;
}
.caption:hover {
  color: cyan;
  font-weight: 200;
}

<section class="body-wrapper">



  <div class="everything-wrapper fixed-width">
    <p class="desc-para">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

    <div class="links-wrapper">

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

    </div>
    <!-- .links-wrapper -->

  </div>
  <!-- .everything-wrapper -->



</section>
<!-- .body-wrapper -->

在此 SSCCE 中，当鼠标悬停在 .a_link 上时 transition 应用时 (a.a_link:hover {...})，它会按预期移动，但它的所有兄弟姐妹也会移动因为它的容器也在移动。我希望兄弟姐妹和容器以及除自身之外的所有内容都保持 static/at-its-place 并且只有这个元素应该移动到应用 transition 的位置。我怎样才能做到这一点？

Answer 1

你可以这样做：

div.the-div {
    padding: 4px
}

div.the-div:hover {
    padding: 0;
}

但是同时过渡填充和边框不是太顺利。或者，您可以像这样构造 HTML：

<a class="a-link" href="#">
    <div class="div-wrap">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
    </div>  
    <p class="caption">Strangler Wrangler</p>
 </a>

然后添加这个 CSS:

 .div-wrap {
    border: 4px solid transparent;
    transition: all 0.3s ease;
 }

 .div-wrap:hover {
    border: 4px solid coral;
 }

正在删除：

 .the-div:hover {
    border: coral 6px solid;
 }

Answer 2

你为什么不在

之后尝试 CSS

试试这个代码

div.the-div {  font: 0px/0 a;  height: 140px;  width: 140px;  position:relative;}
div.the-div:after{
content:"";
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
border: coral 2px solid;
z-index:1;
transition: all 0.3s ease 0s;
box-sizing:border-box;
}
.the-div:hover{  background-color: grey;}
.the-div:hover:after {  border: coral 6px solid;}

在.a-link和.caption之间粘贴上面的代码

Answer 3

Why do the sibling elements as well as the parent element move when a transition is applied to an <a> element?

这是因为更改元素的边框宽度会默认更改该元素的计算 width/height。

另一方面，table 个单元格中的元素默认垂直居中对齐。

因此，改变一个单元格内元素的边框宽度会影响该单元格和其他单元格的 width/height 以及其他元素的对齐方式。

I want the siblings and the container and everything except itself to remain static/at-its-place and just this element should move on which the transition is applied. How can I achieve that?

好吧，有多种选择可以实现这一点，但最简单的方法之一（考虑到当前样式表）是更改 div 元素的 box-sizing 并对齐 [=56] 中的元素=] 顶部的单元格：

.a-link { vertical-align: top }
.the-div { box-sizing: border-box }

box-sizing: border-box 更改默认 CSS 框模型以计算元素的宽度和高度，包括边框和填充，但不包括边距。

6.1. ‘box-sizing’ property

border-box
The specified width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height.

综合起来

article,
aside,
figure,
footer,
header,
hgroup,
nav,
section,
details,
summary {
  display: block;
}
section.body-wrapper {
  position: relative;
  background-color: teal;
  width: 100%;
  min-width: 960px;
}
div.fixed-width {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 10px;
}
.everything-wrapper p.desc-para {
  font-size: 18px;
  width: 460px;
  margin: 0 auto;
  padding: 40px 0px 27px;
}
div.links-wrapper {
  background-color: black;
  padding: 20px 0px 50px;
  margin: 0 auto;
  display: table;
  border-collapse: separate;
  border-spacing: 25px;
}
.a-link {
  display: table-cell;
  text-decoration: none;
  vertical-align: top;
}
div.the-div {
  font: 0px/0 a;
  border: coral 2px solid;
  height: 140px;
  width: 140px;
  box-sizing: border-box;
  transition: all 0.3s ease 0s
}
.the-div:hover {
  background-color: grey;
  border: coral 6px solid;
}
.caption {
  font-family: sans-serif;
  font-size: 14px;
  padding-top: 20px;
  text-align: center;
  color: white;
  font-weight: 100;
  transition: all 0.3s ease 0s;
}
.caption:hover {
  color: cyan;
  font-weight: 200;
}

<section class="body-wrapper">
  <div class="everything-wrapper fixed-width">
    <p class="desc-para">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

    <div class="links-wrapper">

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

    </div>
    <!-- .links-wrapper -->

  </div>
  <!-- .everything-wrapper -->
</section>
<!-- .body-wrapper -->

或者，我们可以给悬停的 div 一个（插图）box-shadow，这与边框不同，它不会影响框模型。你可以考虑一下。

article,
aside,
figure,
footer,
header,
hgroup,
nav,
section,
details,
summary {
  display: block;
}
section.body-wrapper {
  position: relative;
  background-color: teal;
  width: 100%;
  min-width: 960px;
}
div.fixed-width {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 10px;
}
.everything-wrapper p.desc-para {
  font-size: 18px;
  width: 460px;
  margin: 0 auto;
  padding: 40px 0px 27px;
}
div.links-wrapper {
  background-color: black;
  padding: 20px 0px 50px;
  margin: 0 auto;
  display: table;
  border-collapse: separate;
  border-spacing: 25px;
}
.a-link {
  display: table-cell;
  text-decoration: none;
}
div.the-div {
  font: 0px/0 a;
  box-shadow: inset 0 0 0 2px coral;
  height: 140px;
  width: 140px;
  transition: all .3s ease 0s;
}
.the-div:hover {
  background-color: grey;
  box-shadow: inset 0 0 0 6px coral;
}
.caption {
  font-family: sans-serif;
  font-size: 14px;
  padding-top: 20px;
  text-align: center;
  color: white;
  font-weight: 100;
  transition: all 0.3s ease 0s;
}
.caption:hover {
  color: cyan;
  font-weight: 200;
}

<section class="body-wrapper">
  <div class="everything-wrapper fixed-width">
    <p class="desc-para">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

    <div class="links-wrapper">

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

      <a class="a-link" href="#">
        <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
        <p class="caption">Strangler Wrangler</p>
      </a>

    </div>
    <!-- .links-wrapper -->

  </div>
  <!-- .everything-wrapper -->
</section>
<!-- .body-wrapper -->

为什么将过渡应用到 <a> 元素时，同级元素和父元素都会移动？

Why do the sibling elements as well as the parent element move when a transition is applied to an <a> element?

html

css

css-transitions

综合起来