Question

我遇到了看似简单的翻滚任务。

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

正如你所看到的，在默认状态下只有后面的数字显示，在悬停时，必须添加20（没问题），颜色改变（没问题），整个事物必须垂直在中间（问题）。

这是我到目前为止所获得的一个问题：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;
}

Answer 1

像这样，但很好：

http://jsfiddle.net/vUCgm/

你想开始玩线高，并且：hover psuedo-class。

Answer 2

实际上，这可以通过单独的CSS （包括垂直对齐，每个原始问题）来实现，从而节省了JS调用。 See jsFiddle.

这是新的CSS，但是为了快速查看（标有注释的新代码）：

#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; }

Answer 3

这应该这样做。你会想要弄清ul的{{1}}和margin-top的高度，以达到你想要的效果。

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

Answer 4

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

JS中只有行高和高度。

始终保持$(this).height(70);并更改行高：

a - ＆gt; line-height:70px;

a：悬停 - ＆gt; line-height:35px;

没有图像的jQuery翻转菜单

4 个答案: