文本颜色和移动文本的css动画，带有jquery示例答案

【问题标题】：css animation for text color and moving text, with jquery example文本颜色和移动文本的css动画，带有jquery示例
【发布时间】：2017-03-13 08:56:21
【问题描述】：

我正在尝试为我的文本颜色设置动画，并在悬停文本后将 > 向右移动约 15 像素。我认为这可以通过 css 实现，但不确定从哪里开始。

$('#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/

【问题讨论】：

标签： jquery css animation css-transitions

【解决方案1】：

设置这个：

.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');
});

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

【讨论】：

【解决方案2】：

这可以通过纯 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/

【讨论】：

整个 a 元素变色怎么办？而不仅仅是标签？
你想改变什么颜色？
整个元素
然后使用 :hover 伪选择器为 a 添加规则。例如a:hover { color: orange; }

【解决方案3】：

如果您不想移动居中的文本，则必须确保 span 元素不在流中。我会相对定位它。带有 css 的动画是用 left:20px on hover 完成的：

.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/

【讨论】：