Блог

Я хотел бы настроить таргетинг на background-image DIV, чтобы я мог применить к нему стиль ‘glow’ при наведении курсора мыши на DIV.

смотрите в этом скрипте пример моей текущей настройки и как я пытаюсь это сделать сейчас (хотя, ориентируясь на div, а не на изображение в div).

Возможно ли это? Если да, то как 🙂 .. если нет, то как я могу изменить свой HTML / CSS, чтобы создать тот же визуальный эффект, который вы видите в скрипке, но разрешить применять к изображению «свечение»?

Заранее спасибо.

Фоновое изображение — это двоичные данные. Вы не можете манипулировать его содержимым с помощью CSS.

Единственный способ — при наведении курсора мыши переключить изображение на другой файл, который имеет свечение вокруг графической стрелки:

 .collapsible {
    background-image: url('/arrow_mini_up.png');
    background-repeat: no-repeat;
    background-position: right;
}

.collapsible:hover {
    background-image: url('/arrow_mini_up_glow.png');
}
  

Даже если вы используете URI данных, это одно и то же: вам нужно указать одно фоновое изображение для состояния по умолчанию, а другое для состояния наведения:

 .collapsible {
    background-image: url('data:image/png;base64,A0Giftt6...');
    background-repeat: no-repeat;
    background-position: right;
}

.collapsible:hover {
    background-image: url('data:image/png;base64,n4x71Al4...');
}