Есть ли способ сделать этот эффект с изображениями при наведении курсором css?

0

У меня есть div с шириной 40 пикселей и высотой 40 пикселей, внутри у меня есть изображение (или background-image: url();) с синим значком facebook (синий "f" без фона). Я не хочу этого, когда я нахожу этот div, логотип на синем становится белым, а фон прозрачным становится синим, используя только одно изображение с одним логотипом в нем. Это возможно?

  • 0
    У вас есть какой-нибудь HTML / CSS?
  • 0
    Нет, я имею в виду, я знаю, что могу сделать это с двумя изображениями или только с одним с фоновым положением, но я хочу сделать что-то вроде этого: .image:hover{ background-color: blue;} или что-то подобное
Показать ещё 5 комментариев
Теги:
hover

2 ответа

2
Лучший ответ

Вот пример с текстом, 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;
}
Поделиться
  • 0
    это гениально, но когда 'f' это логотип, например логотип твиттера?
  • 0
    @nick в этом проблема, в этом случае вы должны использовать два изображения или более качественный спрайт.
0

Вы не запрашивали решение с использованием JavaScript. Тем не менее, я попытался использовать HTML <overlay> с некоторым JavaScript, и, похоже, он работает нормально.

Оверлей расположен точно над изображением и сначала скрыт. Он отображается только тогда, когда мышь находится внутри изображения.

Вычисление ожидает, что фон изображения будет прозрачным.

Я надеюсь, что это помогает.

<!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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню