使用jQuery悬停时为高亮颜色设置动画

Question

在Brackets.io我注意到，当我突出显示他们的徽标并在其上方盘旋时，改变了我从未见过的高亮颜色。此外，如果仔细观察，您还会注意到它们的图标会同时改变颜色。这是你可以用Javascript和jQuery做的事吗？或者这可以通过CSS by itself完成吗？

会不会像......

$('#logo').hover(function(){
  $(this).animate({ highlight: green }, 'slow');
});

Answer 1

我在下面重新组合了他们的HTML和CSS片段：

.brackets-logo a {
    color: #000;
    font: 400 19px / 50px source-sans-pro, sans-serif;
    text-decoration: none;
}

.brackets-logo i {
    display: inline-block;
    height: 15px;
    width: 15px;
    margin: 0 7px 0 0;
    position: relative;
    top: 1px;
    background: url(http://brackets.io/img/sprite.svg) no-repeat 0 0;
    background-size: 18px 94px;
}

.brackets-logo:hover {
    -webkit-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
    -webkit-transition: all 3s;
    -moz-transition: all 3s;
    transition: all 3s;
}

<h1 class="brackets-logo"><a href="#">
<i></i>Brackets</a></h1>

看起来他们正在使用the CSS filter property和transition。 filter some decent support使用前缀（无IE）。

<强>替代

您还可以组合CSS animate属性和:hover伪类以及::selection伪元素来设置文本选择颜色的动画。您必须使用内联svg作为小括号图标，因此您也可以为其fill属性设置动画。

Answer 2

这可以使用css过滤器来实现。 具体来说，你提到的是色调旋转滤镜。 看看这个demo。

您可以将css写为

myelement:hover{

    filter: hue-rotate(360deg);

}

或使用不同的浏览器安全

myelement:hover{

     -webkit-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
    -webkit-transition: all 3s;
    -moz-transition: all 3s;
    transition: all 3s;

}

Answer 3

使用CSS Transitions。

.logo {
  color:grey;
    -webkit-transition: all 1s; /* Safari */
    transition: all 1s;
}

.logo:hover {
  color:red;
}

jsfiddle demo