1

カーソルを合わせると背景（または画像）が縮小し、同時にテキストが拡大するアニメーションメニューを作成しようとしています。

それは私のスタイルシートです：

.menus {
    float: left;
    background-image: url(images/menus_bg.png);
    width: 208px;
    height: 283px;
    }
.menusimg {
    width: 208px;
    height: 283px;
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(images/menu1.png);
    }
.menusimg:hover {
    background-size: 80% 80%;
    }
.menusimg, .menusimg:hover {
    -webkit-transition: background-size 0.2s ease-in ;
    }
.menustxtbox {
    font-family: MP;
    padding-top: 240px;
    width: 208px;
    height: 283px;
    color: #4c4c4c;
    font-size: large;
    text-shadow: gray 0.1em 0.1em 0.2em;
    }
.menustxtbox:hover {
    padding-top: 235px;
    font-size: x-large;
    color: #4fa3f9;
    }
.menustxtbox, .menutxtbox:hover {
    -webkit-transition:font-size 0.1s linear;
    -moz-transition:font-size 0.1s linear;
    }

およびhtml：

    <div class="menus">
        <div class="menusimg">
        </div>
        <div class="menustxtbox">
            Text
        </div>
    </div>

何か案は？この問題を解決する単純なJavaスクリプトまたは何か? :) よろしくお願いします＾＾

4

2 に答える 2

0

さて、あなたが何かをしたか、JavaScriptで何かを試したことを確認するためのコードがなければ、私はこれを提案します:

CSS を変更して、実際のフォント サイズを最初に作成します。

.menustxtbox {
    font-size:40px;
}

次に、いくつかのjqueryを作成します

$('.menus').hover(function(){
    $('.menusimg').animate({width: "100px"});
    $('.menustxtbox').animate({fontSize: "90px"});
}, function(){
    $('.menusimg').animate({width: "208px"});
    $('.menustxtbox').animate({fontSize: "40px"});
});

:hover次に、 CSS スタイルを削除します

ホバーを使いたい場合は、ホバーインテントを調べることをお勧めします

以下のコメントの更新

個別のメニュー項目ごとにこれを行うには、特定の方法で名前を付ける必要があります。例を次に示します。

HTML

<div class="menu">
    <div class="menuItem" id="menu1">
        <div class="menusimg"></div>
        <div class="menustxtbox"></div>
    </div>
    <div class="menuItem" id="menu2">
        <div class="menusimg"></div>
        <div class="menustxtbox"></div>
    </div>
    <div class="menuItem" id="menu3">
        <div class="menusimg"></div>
        <div class="menustxtbox"></div>
    </div>
</div>

次にjQueryを使用すると、使用する必要があり$(this)ます.children()

$('.menuItem').hover(function(){
    $(this).children('.menusimg').animate({width: "100px"});
    $(this).children('.menustxtbox').animate({fontSize: "90px"});
}, function(){
    $(this).children('.menusimg').animate({width: "208px"});
    $(this).children('.menustxtbox').animate({fontSize: "40px"});
});

を使用するときは$(this)、使用しようとしている特定のものに対してやりたいことを何でもします。次に、親または子を使用してそこから上または下に移動し、それらのいずれかに何かを行います。

于 2013-05-09T01:41:40.810 に答える