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

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>

或者删除 JS 中的 mText 和 sText 文本颜色引用。