我一直在尝试在 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
结构中的任何一种变通方法都值得赞赏,只要能达到最终目标。
最佳答案
您将能够使用绝对
定位来实现它。但同样的事情需要 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>
关于html - 在 anchor 标记内放置两个绝对 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41059660/