用于文本颜色和移动文本的css动画，用jquery示例

我正在尝试对文本颜色进行动画处理，并且在将文字悬停后向右移动约15px。我认为这是可能的与CSS，但不知道从哪里开始。用于文本颜色和移动文本的css动画，用jquery示例

$('#home_solutions_list li').mouseenter(function() { 
    link = $(this).find('.home_view_products a'); 
    link.stop(true, true).animate({ 
    'color': '#636a6d' 
    }, 'fast'); 
    link.find('span').animate({ 
    'padding-left': '20px' 
    }, 'fast'); 
});

所以颜色应该改变（不工作jsfiddle），然后后面的span元素应该移动到文本的右边。但是只有span元素应该移动，当前文本居中，链接文本也在移动。这可以简单地在css中完成吗？

http://jsfiddle.net/Q8KVC/2278/

来源

2017-03-13 Source

设置此：

.home_view_products a span { 
    font-size: 16px; 
    padding: 5px; 
    position: relative; 
    left: 0; 
}

，改变你的JS这样的：

$('#home_solutions_list li').mouseenter(function() { 
    link = $(this).find('.home_view_products a'); 
    link.stop(true, true).animate({ 
    'color': '#636a6d' 
    }, 'fast'); 
    link.find('span').animate({ 
    'left': '20px', 
    }, 'fast'); 
}); 
$('#home_solutions_list li').mouseleave(function() { 
    link = $(this).find('.home_view_products a'); 
    link.stop(true, true).animate({ 
    'color': '#1a92d0' 
    }, 'fast'); 
    link.find('span').animate({ 
    'left': '5px' 
    }, 'fast'); 
});

不过，我建议创建悬停和offhover一类，并设置与这些类使用CSS选择器而不是任何JS。只是一个小提示。

来源

2017-03-13 00:33:54

这可以通过在链接悬停时在角度支架上添加触发器来使用纯CSS完成。

a:hover > .tag { 
     color: orange; 
     position: relative; 
     left: 15px; 
} 
a > .tag { 
     position: relative; 
     left: 0 
} 
a > .tag, a:hover > .tag { 
     -webkit-transition: all 1s ease; 
     transition: all 1s ease 
}

的CSS >选择器用于选择特定的元件的所有匹配的儿童;在这种情况下，我们正在寻找作为锚元素的直接后代的类tag的所有元素。

例子：http://jsfiddle.net/gnequ7uq/

来源

2017-03-13 00:41:16 hafiz

怎么样的一个整体元素改变颜色？而不仅仅是标签？ – Source

你想改变颜色？ – hafiz

整个元素 – Source

如果你不想将移动居中文本，你必须确保span元素是跳出流程。我会相对定位它。用CSS动画与左做到：20px的悬停：

.home_view_products a span { 
    position:relative; 
    left:0; 
    font-size: 16px; 
    padding: 5px; 
    -webkit-transition:padding-left 0.2s, color 0.2s; 
    transition:left 0.2s, color 0.2s; 
} 

#home_solutions_list li:hover span { 
    left:20px; 
    color:#636a6d; 
}

见http://jsfiddle.net/1j7dzfda/3/

来源

2017-03-13 00:56:21 xong

用于文本颜色和移动文本的css动画，用jquery示例

回答

相关问题