Question

我一直在尝试在CSS中创建链接淡入淡出效果。 a标签内有两个div，顶部一个在悬停时消失，显示内部内容。

但是当内部div内容较大时，它会溢出。
我意识到这是由于position:absolute所以它的宽度被父a忽略。

父a是否可以采用两个divs的最大宽度？

我的代码在这里：

第一个链接按预期工作，因为内部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

您可以使用absolute定位来实现它。但同样的事情需要父母是相对的。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

请注意，您必须让a { display: block; /* or inline-block */ }让您的HTML保持有效。否则a不能包含块级元素。

而不是绝对定位，您可以在第二个div上使用相对定位和负底边距，并在第一个div上设置背景颜色，将第二个div拉到第一个div后面。然后你可以在悬停时转换第一个div上的不透明度。这将需要在第二个div上设置比在第一个div上更高的z-index。

＆＃13;

a {
  border: 20px solid blue;
  display: inline-block;
  color: #fff;
  }
a :first-child {
  background-color: #a00;
  position: relative;
  transition-duration: 0.2s;
  z-index: 3;
}

a :last-child {
  background-color: #0a0;
  margin-bottom: -1.2em;
  position: relative;
  top: -1.2em;
  z-index: 2;
}
a:hover :first-child {
  opacity: 0;
}

＆＃13;

<a href="#">
  <div>Linktext</div>
  <div>Longer Link text on hover</div>
</a>

＆＃13;

在锚标记内放置两个绝对div

我的代码在这里：

2 个答案: