jquery - CSS - DIV 中的目标背景图像

Question

我想以 DIV 的 background-image 为目标，这样当 DIV 悬停在上面时我可以对其应用“发光”样式。

see this fiddle例如，我当前的设置是什么以及我现在是如何尝试这样做的(尽管是针对 div 而不是 div 中的图像)。

这可能吗？如果是，如何 :) ..如果不是，我如何更改我的 HTML/CSS 以提供与您在 fiddle 中看到的相同的视觉效果，但允许图像应用“发光”？

提前致谢。

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...');
}