3

<li>一人一人が浮かんでいるメニューを作りたいです。しかし、奇妙なことに、メニュー全体が常に浮かんでいます。これがフィドルコードです。

私は次のcssコードを持っています:

body {
background-color: #eee;
margin: 0;
padding: 0;
overflow: hidden;
}

.tabs {
    width: 80%;
    position: fixed;
    bottom: -20px;
    left: 100px;
}
.tabs ul {
    display:block;
}
.tabs li {
    width: 60px;
    height: 80px;
    margin-bottom: -20px;
    padding: 10px;
    float: left;
    list-style: none;
    display: inline;
    background-color: #ccc;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    border-radius: 10px 10px 0px 0px;
    font-family: verdana;
    text-align: center;
}
.tabs li:hover {
    margin-bottom: 20px;
}​
4

3 に答える 3

2

jQueryに慣れている場合は、jQueryを使用すると問題が解決します。これを試してください

  jQuery("li").mouseover(function() {
    jQuery(this).css("margin-bottom","20px");
  }).mouseout(function(){
   jQuery(this).css("margin-bottom","0px");
  });
于 2012-04-10T13:22:46.613 に答える
2

理由は、それにマージンulを与えると、全体がプッシュされるためです。bottomの代わりに与えたほうがいいですmargin。次のように書きます。

.tabs li:hover {
    bottom: 20px;
}

これをチェックしてくださいhttp://jsfiddle.net/X96KE/17/

于 2012-04-10T13:09:44.357 に答える
0

これは、マージントップをどうするかを指定していないためです。更新された例は次のとおりです：http：//jsfiddle.net/X96KE/18/

.tabs li:hover {
    margin-bottom: -40px; 
    margin-top: -40px;
}
于 2012-04-10T13:16:47.800 に答える