0

次のチュートリアルに関する助けが必要です http://tympanus.net/codrops/2011/07/12/animated-text-and-icon-menu/

だから私の質問は - ホバー時にタイルの背景色を変更し、テキストの色に影響を与えずにマウスアウト時にデフォルトに戻す方法は?

このチュートリアルの作成者に連絡を取ろうとしましたが、何の回答も得られませんでした。誰か助けてくれませんか？

ありがとう

4

2 に答える 2

1

代わりに、これを元の色に置き換えます。

<ul id="sti-menu" class="sti-menu">
    <li data-hovercolor="#37c5e9">
[...]

機能が必要ない場合は、すべての LI 要素から data-hovercolor を削除し、スクリプトからそれらを適用する部分を削除することをお勧めします。修正版:

$menuItems.bind('mouseenter', function(e) {

    clearTimeout(t_mouseenter);

    var $item       = $(this),
        $wrapper    = $item.children('a'),
        wrapper_h   = $wrapper.height(),
        // the elements that animate inside this menu item
        $movingItems= $wrapper.find('.sti-item');

    t_mouseenter    = setTimeout(function() {
        // indicates the item is on hover state
        $item.addClass('sti-current');

        $movingItems.each(function(i) {
            var $item           = $(this),
                item_sti_type   = $item.data('type'),
                speed           = settings.animMouseenter[item_sti_type].speed,
                easing          = settings.animMouseenter[item_sti_type].easing,
                delay           = settings.animMouseenter[item_sti_type].delay,
                dir             = settings.animMouseenter[item_sti_type].dir,
                // if dir is 1 the item moves downwards
                // if -1 then upwards
                style           = {'top' : -dir * wrapper_h + 'px'};

            if( item_sti_type === 'icon' ) {
                // this sets another bg image position for the icon
                style.backgroundPosition    = 'bottom left';
            } 
            // we hide the icon, move it up or down, and then show it
            $item.hide().css(style).show();
            clearTimeout($item.data('time_anim'));
            $item.data('time_anim',
                setTimeout(function() {
                    // now animate each item to its default tops
                    // each item will animate with a delay specified 
                    // in the options
                    $item.stop(true)
                         .animate({top : $item.data('deftop') + 'px'}, speed, easing);
                }, delay)
            );
        });
        // animate the bg color of the item
        $wrapper.stop(true).animate({
            backgroundColor: settings.defaultTextColor
        }, settings.boxAnimSpeed );

    }, 100);    

})

警告: テストしていません。元のスニペットから 11 行目と 31 行目の else ブロックを削除しただけです。私が知る限り、ホバー テキストの色を取得および設定するのはこれらの行だけです。

于 2012-08-27T16:47:45.623 に答える
0

それは簡単です、cssを使ってください。

CSS

.sti-item span{
    color:#000;
}

HTML

<li data-hovercolor="#37c5e9">
    <a href="#">
        <h2 data-type="mText" class="sti-item"><span>Advanced Patient Care</span></h2>
        <h3 data-type="sText" class="sti-item"><span>Personalized to your needs</span></h3>
        <span data-type="icon" class="sti-icon sti-icon-care sti-item"></span>
    </a>
</li>

または、JS で mText と sText のテキスト カラー参照を削除します。

于 2012-08-27T16:40:08.473 に答える