Question

我正在尝试动画我的文字颜色，并且有一个＆gt;在悬停文本后向右移动约15px。我认为这可以用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/

Answer 1

设置：

Group.findOneAndUpdate({
        "invitations": {
            $elemMatch: {
                "email": req.user.email
            }
        }
    }, {
        $pullAll: {
            "invitations": [{ "email": req.user.email }]
        },
        $addToSet: {
            "users": { "UserId": req.user._id }
        }
    })
    .then(succ => {
        console.log(succ);
        next()
    })
    .catch(err => {
        error(res, err)
    });

将你的JS改为：

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

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

Answer 2

这可以通过纯链接来实现，方法是在链接悬停时在尖括号上添加触发器。

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/

Answer 3

如果您不想移动居中文本，则必须确保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/

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

3 个答案: