0

li（リスト）要素の高さを上向きに変更する「ホバー」効果を作ろうとしています。jqueryを使用して、要素の高さを下向きに変更することができました。上方向への方向転換は可能ですか？

http://www.izrada-weba.com/vedranmarketic/

css ファイル:

body{
    background-color: #252524;
    text-align: center;
}

#centriranje{
    width: 1017px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
#header{
    height: 90px;
    background: url(img/bg-head.gif) repeat-x;
    margin-top: 20px;
}
#logo{
    height: 90px;
    width: 237px;
    float: left;
}
#izbornik{
    width: 780px;
    height: 90px;
    float: left;
}
    #izbornik ul{
    margin: 39px 10px 0px 0px;
    padding: 0px;
    list-style-type: none;
    overflow: hidden;
    position: absolute;

    }
        #izbornik ul li{
            float: left;
            width: 36px;
            height: 41px;
            margin-right: 2px;
            background-position: top;
            background-repeat: no-repeat;
            border: 1px solid white;
        }
            #izbornik ul li#home{background-image: url(img/izbornik-home.gif);}
            #izbornik ul li#news{background-image: url(img/izbornik-news.gif);}
            #izbornik ul li#shop{background-image: url(img/izbornik-shop.gif);}
            #izbornik ul li#info{background-image: url(img/izbornik-info.gif);}

jquery ファイル:

$(document).ready(function(){
    $(".tab").fadeTo("fast", 0.7); // This sets the opacity of the thumbs to fade down to 30% when the page loads
    $(".tab").animate({height:'36px'},{queue:false,duration:500});

    $(".tab").hover(function(){
        $(this).fadeTo("fast", 1.0);
        $(this).animate({height:'41px'},{queue:false,duration:500});
    },function(){
        $(this).fadeTo("fast", 0.7);
        $(this).animate({height:'36px'},{queue:false,duration:500});
    });


});

html:

<body>
<div id="centriranje">

    <div id="header">
        <div id="logo"><a href="http://localhost/vedranmarketic"><img src="img/logo.jpg" width="237" height="64" border="0" /></a></div>

        <div id="izbornik">
            <ul>
                <li id="home" class="tab"></li>
                <li id="news" class="tab"></li>
                <li id="shop" class="tab"></li>
                <li id="info" class="tab"></li>
            </ul>
        </div>
    </div>


</div>
</body>

前もって感謝します！イル

4

1 に答える 1

3

通常、結果の位置がサイズの変化と同じ量になるように、「上」の位置と高さを変更する必要があります。あるいは、要素を下から別の要素内に絶対的に配置することもできます。(例: 位置:絶対; 下: 40px)

于 2010-01-22T20:50:36.137 に答える