Question

我正在尝试创建一个在悬停时向上滑动的菜单。我的问题是所有链接都向上滑动，而不是一次一个。

这是我的HTML

<section id="content">
<div id="stuffhere">asd</div>
</section>
<div id="bottom">
  <nav id="links">
    <a href="#" id="m1" class="mlink">hello</a>
    <a href="#" id="m2" class="mlink">every</a>
    <a href="#" id="m3" class="mlink">one</a>
  </nav>
</div>

和我的css

body,html {
    height: 100%;
}
#content {
    background: #ccc;
    height: 40%;
}
#bottom {
    height: 60%;
    background: #444;
}
#links {
    display: table;
    position: absolute;
    bottom: 0;
    right: 0;
    border-spacing: 1em 0;
    border-collapse: separate;
}
.mlink {
    display: table-cell;
    text-align: center;
    font-size: 2em; 
    padding: 0.2em 0.6em;

    background: #ccc url('http://images.sodahead.com/polls/004017497/230735835_Emotes_face_wink_icon_answer_1_small.png');
    background-repeat: no-repeat;
    background-position: 50% 54px;

    transition: padding 0.2s linear, background-position 0.4s ease;
}
.mlink:hover { 
    padding-top: 2em; 
    background-position: 50% 10px;
}

这是我的小提琴：http://jsfiddle.net/HfX2M/

任何帮助表示赞赏：）

Answer 1

喜欢这个？

小提琴： http://jsfiddle.net/SinisterSystems/HfX2M/1/

.mlink {
    display: inline;

如果您为table-cell媒体资源选择了display，则假设只是table cell table row。所以当一个人扩张的时候，剩下的就这样了。

或者，您也可以使用inline-block将它们并排放置，但为个别更改保留block状态。

有关display属性的更多信息，请参阅W3标准页面以供参考。

http://www.w3.org/wiki/CSS/Properties/display

如果你想保持你的填充（它不再是一个表，所以你必须自己做，请使用inline-block和另外的margin。

.mlink {
    display: inline-block;
    margin-left:.4em;

小提琴： http://jsfiddle.net/SinisterSystems/HfX2M/3/ **

通过转换向上滑动一个菜单项

1 个答案:

喜欢这个？