CSS - DIV中的目标背景图像

Question

我想定位background-imageDIV,以便在DIV悬停时我可以应用"发光"样式.

看看这个小提琴,看看我现在的设置是什么以及我现在是怎么做的(尽管是针对div而不是div中的图像).

这可能吗？如果是这样,如何:) ..如果没有,我怎么可能改变我的HTML/CSS,以提供你在小提琴中看到的相同的视觉效果,但允许图像应用"发光"？

提前致谢.

Answer 1

背景图像是二进制数据.您无法使用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...');
}