悬停时更改项目的高度顶部 [英] Change height-top of item when hover

问题描述

我想创建一个菜单。当我将鼠标悬停时，项目的高度会像

但真正的菜单就像

这是我的jsfid http://jsfiddle.net/8vyUg/

 < div id = menu> 
< ul> 
< li>< a href =＃>谁< / a>< / li> 
< li>< a href =＃> What< / a>< / li> 
< li>< a href =＃>其中< / a>< / li> 
< / ul> 
< / div> 
  

该怎么做，谢谢！

解决方案

使用负边距将元素上移，然后填充以将文本移回其原始位置也可以实现类似的效果。

< pre class = lang-css prettyprint-override> #menu a：hover {
margin-top：-10px;
padding-top：10像素；
background-color：＃6666AA;
}


示例： http://jsfiddle.net/bwQCL/1/

I want to create a menu. When I hover, height-top of item will change like

But real my menu like

here is my jsfid http://jsfiddle.net/8vyUg/

<div id="menu">
    <ul>
        <li><a href="#">Who</a></li>
        <li><a href="#">What</a></li>
        <li><a href="#">Where</a></li>
    </ul>
</div>

How to do that thank!

解决方案

A similar effect can be achieved using negative margins to move the element up, then padding to move the text back to its original position.

#menu a:hover {
    margin-top: -10px;
    padding-top: 10px;
    background-color: #6666AA;
}

Example: http://jsfiddle.net/bwQCL/1/

这篇关于悬停时更改项目的高度顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！