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”的span标签应该被隐藏，只有在“1”悬停时才出现。

添加一个新类“hidden-span”来控制应该隐藏的span标记，这样可以更容易。

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

此外，原始的跨度样式需要稍微修改一下。

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

Example Fiddle

国际象棋网格没有隐藏第二跨

1 个答案: