Question

我需要一些关于以下教程的帮助 http://tympanus.net/codrops/2011/07/12/animated-text-and-icon-menu/

所以我的问题是 - 如何在悬停时更改磁贴背景颜色并在鼠标移出时恢复为默认值而不影响文本颜色？

我试图与本教程的作者取得联系，但没有得到任何答案。有人可以帮忙吗？

由于

Answer 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块 - 这些是获取并设置悬停文本颜色的唯一行。据我所知。

Answer 2

这很简单，用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>

或删除mText＆amp; JS中的sText文本颜色引用。

如何在悬停时更改切片颜色并在鼠标移出时恢复为默认值而不影响文本颜色？

2 个答案: