Question

我有一个40px宽度和40px高度的div，里面有一个图像（或background-image：url（）;），带有蓝色的facebook图标（蓝色＆＃34; f＆＃34;没有背景）。当我将鼠标悬停在那个div上时，蓝色的徽标变为白色，透明的背景变为蓝色，仅使用一个只有一个徽标的图像。这可能吗？

Answer 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;
}

Answer 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>

有没有办法用css悬停图像来做这个效果？

2 个答案: