Question

我想定位DIV的background-image，以便在DIV悬停时我可以应用'发光'样式。

see this fiddle了解我目前的设置是什么以及我现在如何尝试（尽管是针对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...');
}

CSS - DIV中的目标背景图像

1 个答案: