1

这是一个小问题。如果你去 www.thumbtack.com/jobs，然后去他们的赞助商那里。您可以看到，起初您看不到赞助商名称中的颜色，但是当您将鼠标悬停在他们上方时，您可以看到颜色出现。有人可以告诉我如何做到这一点。我不太确定在谷歌上搜索什么（比如使用什么关键字）。我曾尝试使用检查元素，但无法弄清楚它是如何做到的。任何帮助将不胜感激。

4

2 回答 2

10

在 CSS 中最广泛兼容的方法是使用单独的图像——一组灰度图像和一组全彩色图像，您可以使用 CSS:hover伪类（通常使用background-image属性）在它们之间切换，例如：

.sponsor {
    background-image: url('gray.png');
}

.sponsor:hover {
    background-image: url('color.png');
}

如果您愿意，您可以通过将灰度和彩色版本放入单个图像中来实现这一点，并将其像“窗口”一样移动到图像上（一种称为 CSS Sprites 的技术，正如指出的那样乔恩 P)。例如，如果徽标是 200x100，则创建一个 200x200 的图像，顶部为灰色，底部为彩色，然后执行以下操作：

.sponsor {
    width: 200px;
    height: 100px;
    background-image: url('logos.png');
    background-position: 0px 0px;
}

.sponsor:hover {
    background-position: 0px -100px;
}

在基于图像的解决方案中，这个更可取，因为正如 Jon 指出的那样，它可以减少页面加载时间，并且还可以防止第一次将鼠标悬停在图像上时出现延迟。此外，它减少了一个 HTTP 请求，这可以对高延迟连接（如手机数据连接）产生重要影响。

但是，如果您的目标是相对较新的浏览器，则可以使用 CSS 过滤器：

.sponsor {
    filter: grayscale(1.0);
}

.sponsor:hover {
    filter: none;
}

不幸的是，这目前仅适用于 Safari、Chrome、新版本的 Opera 和其他基于 WebKit 的浏览器。它目前也是一个前缀属性，因此您需要将其用作-webkit-filter.

于 2013-10-09T03:23:21.023 回答
0

你可以用 CSS3 做到这一点：

.object {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url(grayscale.svg);
 /* Firefox 4+ */
    filter: gray;
 /* IE 6-9 */;
}

.object:hover {
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    -o-filter: none;
    filter: none;
    filter: none;
    filter: none;
}

或者您可以background: url()以相同的方式在悬停时使用和更改它。

于 2013-10-09T03:28:45.737 回答