html - 在 anchor 标记内放置两个绝对 div

Question

我一直在尝试在 CSS 中制作链接淡入淡出效果。 a 标签内有两个 div，最上面的 div 在悬停时消失，显示出内部内容。

然而，当内部 div 有更大的内容时，它就会溢出。
我意识到这是由于 position:absolute ，所以它的宽度被忽略了父 a.

有没有办法让父 a 占据两个 div 中最大的宽度？

我的代码在这里:

第一个链接按预期工作，因为内部 div 的内容较少
第二个链接描述了这个问题。

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  margin: 0px;
  padding: 0px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
}
a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  outline: none;
  color: #444;
}
a.fade {
  border: 1px solid #ddd;
  overflow: hidden;
  display: inline-block;
}
a.fade > div {
  display: inline-block;
  padding: 10px 15px 10px 15px;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  text-align: center;
}
a.fade>div:first-child {
  position: absolute;
}
a.fade > div:last-child {
  z-index: 1;
  position: relative;
  background-color: #ffaaaa;
  opacity: 1;
  left: 0px;
  top: 0px;
  -moz-box-shadow: 1px 1px 3px 1px rgba(00, 0, 0, 0.2);
  -webkit-box-shadow: 1px 1px 3px 1px rgba(00, 0, 0, 0.2);
  box-shadow: 1px 1px 3px 1px rgba(00, 0, 0, 0.2);
}
a.fade:hover {
  -moz-box-shadow: inset 0px 0px 3px 1px rgba(00, 0, 0, 0.2);
  -webkit-box-shadow: inset 0px 0px 3px 1px rgba(00, 0, 0, 0.2);
  box-shadow: inset 0px 0px 3px 1px rgba(00, 0, 0, 0.2);
}
a.fade:hover > div:last-child {
  opacity: 0;
}

<a href="#" class="fade">
  <div>Content inside</div>
  <div>This one fades</div>
</a>

<a href="#" class="fade">
  <div>Content inside</div>
  <div>This fades</div>
</a>

html 结构中的任何一种变通方法都值得赞赏，只要能达到最终目标。

Answer 1

您将能够使用绝对 定位来实现它。但同样的事情需要 parent 是相对的。

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  margin: 0px;
  padding: 0px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
}
a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  outline: none;
  color: #444;
}
a.fade {
  border: 1px solid #ddd;
  overflow: hidden;
  display: inline-block;
  position: relative;
}
a.fade > span {
  display: inline-block;
  padding: 10px 15px 10px 15px;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  text-align: center;
}
a.fade > span:first-child {
  position: relative;
  z-index: 1;
}
a.fade > span:last-child {
  z-index: 1;
  position: absolute;
  background-color: #ffaaaa;
  opacity: 1;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  -moz-box-shadow: 1px 1px 3px 1px rgba(00, 0, 0, 0.2);
  -webkit-box-shadow: 1px 1px 3px 1px rgba(00, 0, 0, 0.2);
  box-shadow: 1px 1px 3px 1px rgba(00, 0, 0, 0.2);
}
a.fade:hover {
  -moz-box-shadow: inset 0px 0px 3px 1px rgba(00, 0, 0, 0.2);
  -webkit-box-shadow: inset 0px 0px 3px 1px rgba(00, 0, 0, 0.2);
  box-shadow: inset 0px 0px 3px 1px rgba(00, 0, 0, 0.2);
}
a.fade:hover > span:last-child {
  opacity: 0;
}

<a href="#" class="fade">
  <span>Content inside</span>
  <span>This one fades</span>
</a>

<a href="#" class="fade">
  <span>Content inside</span>
  <span>This fades</span>
</a>