js改变span高度 由上至下变为0px

Question

如图所示：成长故事这里有两个层 第一层是成长故事 第二层是图片现在想让第一个层 当鼠标移动上去之后 第一层高度 由上至下缩减为0px 然后显示第二个层
也就是说让

这是大概的html结构
<ul>
<li>
<span class="fmline5C1"></span>
<b class="czgs984">123</b>
<b style=“margin-top: -155px;”>456</b>
</li>
</ul>
也就是说想让<b>456</b>这个层高度由上至下缩减为0 显示出 123 这个层
希望可以写详细点 不太懂js 没有分了 多谢大家了

Answer 1

<style>
.fmline5C1
{
display:inline-block;
width:100px;
height:20px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}

.fmline5C1:hover
{
height:0;
}
</style>追问

要有个动态效果

追答

.fm{width: 200px;height:200px;}
.fmline5C1{position:absolute;width: 200px;height:200px;background-color: #5b70db;margin:0;padding:0;z-index:99;}
.fmline5C2{position:absolute;z-index:100;width: 200px;height:200px;background:yellow;}

本回答被提问者和网友采纳

Answer 2

表示没看懂问题追问

简单地说 就是两个层罗在一起 然后让第一个层的高度降为0px 显示出第二个层来

追答

第二层开始时候不显示？