css - 国际象棋网格不隐藏第二个跨度

Question

需要一些帮助。我有多个像国际象棋网格一样的 div。在翻转单个网格时，其内部跨度在网格内向上滚动并出现底部隐藏跨度。以下是无法以这种方式工作的代码。

    <section id="three">
    <div class="tri"><h1>Corporate</h1></div>
    <div class="corporate">
        <div class="left">
            <a href="#">
                <span style="background:#06F">1</span><!--
                --><span style="background:#0CF">2</span>
            </a><!--
            --><a href="#"><span style="background:#06F">1</span><span style="background:#0CF">2</span></a><!--
            --><a href="#"><span style="background:#06F">1</span><span style="background:#0CF">2</span></a><!--
            --><a href="#"><span style="background:#06F">1</span><span style="background:#0CF">2</span></a>
        </div><!--
        --><div class="right">
            <a href="#">1</a><!--
            --><a href="#">2</a><!--
            --><a href="#">3</a><!--
            --><a href="#">4</a>
        </div>
    </div>
</section>

请记住，我使用百分比是为了向不同的设备显示它。以下是网格的CSS

#three{display:block;}
#three .corporate{display:table; height:70%; width:98%; margin:0 auto;}
#three .corporate div{display:table-cell; width:50%; margin-left:0;}

#three .corporate div a{height:50%; background:#F90; display:inline-table; width:50%; text-align:center; text-decoration:none; color:#FFF; overflow:hidden; position:relative}
#three .corporate div a span{display:table-row; width:100%; height:100%}
#three .corporate div a:hover > span{bottom:0}

请帮忙。

Answer 1

我不确定我是否完全理解你想要做什么，但听起来包含“2”的跨度标签应该被隐藏，并且只有在“1”悬停时才会出现。

添加一个新类“hidden-span”来控制应该隐藏的 span 标签使这更容易一些。

#three .corporate div a span.hidden-span 
{ 
  position: absolute; 
  bottom: -100%; 
  z-index: 2; 
}

另外，原来的 span 样式需要稍微改动一下。

#three .corporate div a span
{
  display:table-row; 
  width:100%; 
  height:100%; 
  z-index:1; 
  transition: bottom .5s; 
  margin:0;padding:0;
}

Example Fiddle