有没有办法用css悬停图像来实现这种效果？答案

【问题标题】：Is there a way to do this effect with images on hover with css?有没有办法用css悬停图像来实现这种效果？
【发布时间】：2014-06-12 09:09:56
【问题描述】：

我有一个 40px 宽和 40px 高的 div，在里面我有一个带有蓝色 facebook 图标（没有背景的蓝色“f”）的图像（或背景图像：url();）。我不希望当我将鼠标悬停在那个 div 上时，蓝色的标志变成白色，透明的背景变成蓝色，只使用一张图片，里面只有一个标志。这可能吗？

【问题讨论】：

你有 HTML/CSS 吗？
不，我的意思是，我知道我可以用两张图片或一张有背景位置的图片来制作它，但我想制作这样的东西：.image:hover{ background-color: blue;} 或类似的东西
@nick 要能够将f 从蓝色更改为白色，您必须使用两张图片。
好的，但是如果我使用带有背景位置的精灵，并且我设置了一个过渡属性，过渡是一个“幻灯片”效果，我该如何做一个“淡入淡出”效果？
@nick 你只能用两张图片获得淡入淡出效果，我认为......

标签： html css hover

【解决方案1】：

这是一个带有文本的示例，FIDDLE

<div>f</div>

div {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-family: Tahoma;
 font-size: 26px;
  font-weight: bold;
  color: #415e9b;
  cursor: pointer;
  transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
}
div:hover {
  background: #415e9b;
  color: #fff;
}

【讨论】：

那是天才，但是当 'f' 是一个标志，例如 twitter 标志？
@nick 这就是问题所在，在这种情况下，您必须使用两个图像或更好的图像精灵。

【解决方案2】：

您没有要求使用 JavaScript 的解决方案。但是，我尝试使用带有一些 JavaScript 的 HTML <overlay>，它似乎工作得很好。

叠加层正好位于图像上方，起初是隐藏的。仅当鼠标在图像内时才会显示。

计算期望图像的背景是透明的。

希望对你有帮助。

<!doctype html>
<html>
<head>
    <title>Inverse Image on Hover</title>
    <meta charset="utf-8">
    <style>
        #logoImage, #logoOverlay {
            position: absolute;
            top: 0;
            left: 0;
        }
        #logoOverlay {
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div id="logo">
        <img id="logoImage" src="logo.png" width="40" height="40" alt="logo">
        <canvas id="logoOverlay" width="40" height="40"></canvas>
    </div>

    <script>
    window.onload = init;

    function init() {
        var image = document.getElementById("logoImage");
        image.onmouseover = showOverlay;

        var overlayCanvas = document.getElementById("logoOverlay");
        overlayCanvas.onmouseout = hideOverlay;

        var overlayContext = overlayCanvas.getContext("2d");

        overlayContext.drawImage(image, 0, 0, overlayCanvas.width, overlayCanvas.height);
        var overlayImageData = overlayContext.getImageData(0, 0, overlayCanvas.width, overlayCanvas.height);
        var length = overlayImageData.data.length / 4;

        for (var i = 0; i < length; i++) {
            var r = overlayImageData.data[i * 4 + 0];
            var g = overlayImageData.data[i * 4 + 1];
            var b = overlayImageData.data[i * 4 + 2];
            var a = overlayImageData.data[i * 4 + 3];
            applyEffect(i, r, g, b, a, overlayImageData.data);
        }
        overlayContext.putImageData(overlayImageData, 0, 0);

    }

    function applyEffect(pos, r, g, b, a, data) {

        // your computation here based on red, green, blue, alpha pixel values
        if (a < 10) {
            // facebook blue
            data[pos * 4 + 0] = 59;
            data[pos * 4 + 1] = 89;
            data[pos * 4 + 2] = 152;
            data[pos * 4 + 3] = 255;
        }
        else {
            // opaque white
            data[pos * 4 + 0] = 255;
            data[pos * 4 + 1] = 255;
            data[pos * 4 + 2] = 255;
            data[pos * 4 + 3] = 255;
        }
    }

    function showOverlay()
    {
        var overlay = document.getElementById("logoOverlay");
        overlay.style.visibility = 'visible';
    }

    function hideOverlay()
    {
        var overlay = document.getElementById("logoOverlay");
        overlay.style.visibility = 'hidden';
    }

    </script>
</body>
</html>

【讨论】：