当转换应用于<a> element?

时间：2015-11-13 08:22:46

标签： html css css3 css-transitions 

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

In this SSCCE, when the transition is applied on .a_link when the mouse hovers over it (a.a_link:hover {...}), it moves as expected, but all of its siblings as well as its container also move. 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?

3 个答案:

答案 0 :(得分：2)

你可以这样做：

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

答案 1 :(得分：1)

为什么不在

之后尝试使用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

之间

答案 2 :(得分：1)

  

为什么在将转换应用于<a>元素时，兄弟元素和父元素会移动？

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

另一方面，表格单元格中的元素默认垂直对齐中间。

因此，更改单元格内元素的边框宽度会影响该单元格的宽度/高度以及其他单元格的宽度/高度，以及其他元素的对齐方式。

  

我希望兄弟姐妹和容器以及除自身之外的所有东西都保持静止/就位，并且这个元素应该移动，在该元素上应用过渡。我怎样才能做到这一点？

有很多选项可以实现这一点，但其中一个最简单的选项（考虑当前样式表）正在改变div元素的box-sizing并将表格单元格中的元素对齐在顶部：

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

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

  

<强> 6.1. ‘box-sizing’ property

     

<强>边界框
  指定的宽度和高度（以及相应的最小/最大属性）   此元素确定元素的边框。也就是说，任何   布局和绘制元素上指定的填充或边框   在指定的宽度和高度内。

全部放在一起

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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 -->
＆＃13;
＆＃13;
＆＃13;

或者我们可以给悬停的div一个（插入）box-shadow，它不会影响框模型，而不像边框。哟可能想考虑一下。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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 -->
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题