没有图像的 jQuery 翻转菜单答案

【问题标题】：jQuery rollover menu without images没有图像的 jQuery 翻转菜单
【发布时间】：2011-10-11 23:43:44
【问题描述】：

我被一个看似简单的翻转任务困住了。

黑色是默认状态，蓝色是悬停状态。

如您所见，在默认状态下，仅显示后面的数字，在悬停时，必须添加 20（没问题），改变颜色（没问题），整个东西必须垂直居中（问题）。

这是我目前所掌握的 jsFiddle：http://jsfiddle.net/markushausammann/3YPXk/

什么标记和 CSS 可以不使用图像来实现这种行为？¨

编辑：标记并不重要，它是一个正常的水平 ul li 标记。但这里有一个标记可能看起来如何的示例：

<div id="nav-years">
   <ul>
      <li><a href="#" id="2002"><p class="supertext">20</p><p>02</p></a></li>
      <li><a href="#" id="2003"><p class="supertext">20</p><p>03</p></a></li>
      <li><a href="#" id="2004"><p class="supertext">20</p><p>04</p></a></li>
      <li><a href="#" id="2005"><p class="supertext">20</p><p>05</p></a></li>
    </ul>
</div>

还有一些 CSS，但这可能需要针对相应的解决方案进行调整。

/* years navigation */
#nav-years {
    position: relative;
    display: block;
    width: 400px;
    height: 70px;
}

#nav-years ul {
    display: block;
    height: 70px;
    list-style: none;
}

#nav-years li {
    display: block;
    height: 35px;
    width: 35px;
    float: left;
    text-align: center;
    margin: 0 15px;
    overflow: hidden;
}

#nav-years a {
    display: block;
    width: 35px;
    color: #000000;
    font-size: 30px;
}

【问题讨论】：

请向我们提供您的 html 标记，以便我们为您提供帮助 :)
jsFiddle demo 会很有帮助。
在我的脑海中，您可以更改高度和宽度以强制文本中断。不过可能需要inline-block。小提琴会很棒。
不能给你一个 jsFiddle 演示，如果可以，我就不需要问这个问题了。
@Jack 改变高度不会使一半的内容上下移动，它会向下移动所有内容。我的第一个问题已经是我没有将内容的下部放入可见区域。

标签： jquery html css rollover

【解决方案1】：

类似这样，但很好：

http://jsfiddle.net/vUCgm/

您想开始使用行高和 :hover 伪类。

【讨论】：

轻微变化：jsfiddle.net/vUCgm/1 现在位置与 padding-top 值密切相关，只需更改一件事
@puppybeard dang，你打败了我 :)

【解决方案2】：

真的，这可以通过 CSS 单独完成（包括垂直对齐，每个原始问题），为您节省 JS 调用。 See jsFiddle.

这是新的 CSS，不过是为了快速查看（用 cmets 标记的新代码）：

#nav-years { display:block; height:70px; position:relative; width:400px; }

#nav-years ul { display:block; height:70px; list-style:none; }

#nav-years li {
    display: block;
    float: left;
    height: 35px;
    line-height:25px;
    margin: 0 5px;
    overflow: visible; /* added */
    text-align: center;
    width: 35px;
}

#nav-years a {
    color: #000000;
    display: block;
    font-size: 30px;
    text-decoration: none;
    width: 35px;
}

#nav-years a:hover { 
    color: #00FFFF;
    margin-top:-12px; /* added */
}

/* added */
#nav-years a .supertext { display:none; }
#nav-years a:hover .supertext { display:block; }

【讨论】：

【解决方案3】：

应该这样做。你会想要弄乱lis 的ul 和margin-top 的高度，以得到你想要的。

http://jsfiddle.net/3YPXk/3/

【讨论】：

【解决方案4】：

http://jsfiddle.net/3YPXk/2/

JS 中只有 line-height 和 height。

一直保持$(this).height(70);并改变行高：

a -> line-height:70px;

a:hover -> line-height:35px;

【讨论】：