Question

我的网站上有一个徽标，我只需在浅色和深色版本之间淡入淡出。徽标位于移动滑块上，因此我使用精彩的“背景检查”脚本（http://www.kennethcachia.com/background-check/）来确定应显示哪个徽标。该脚本通过在徽标上应用一个类来实现这一点，“背景 - 浅色”或“背景 - 暗色”。这些类仅确定显示徽标的svg精灵的背景位置。

目前，类的更改意味着徽标“移动”到位而不是淡出，并且我在网上找到的标准解决方案（例如添加状态更改）都不起作用，因为我正在使用这些类。谁能指出我正确的方向？纯css解决方案是首选，但如果需要，我可以使用JQuery。

由于

MARKUP

<a href="#" class="logo check">Logo</a>

CSS

.logo.background--dark { background: url(images/ui-sprite.svg) no-repeat -120px 0; }
.logo.background--light { background: url(images/ui-sprite.svg) no-repeat 0 0; }

Answer 1

现在已经通过添加第二个徽标元素解决了这个问题（不是理想的，但在这种情况下我是最好的选择）。希望这对其他人来说是一个有用的解决方案。

<强> HTML

<a href="#" class="logo check">Logo</a>
<a href="#" class="logo-invert">Logo</a>

<强> CSS

.logo {
    width: 85px;
    height: 35px;
    background: url(images/ui-sprite.svg) no-repeat 0 0;
    text-indent: -9999px;
    display: block;
    z-index: 999;
}

.logo-invert {
    width: 85px;
    height: 35px;
    background: url(images/ui-sprite.svg) no-repeat -119px 0;
    text-indent: -9999px;
    display: block;
    position: absolute;
    z-index: 999;
    opacity: 0;
}

/* Background Check */
.logo.background--dark { opacity: 0; }
.logo.background--dark ~ .logo-invert { opacity: 1; }

.logo.background--light { opacity: 1; }
.logo.background--light ~ .logo-invert { opacity: 0; }

使用background-check.js在svg精灵背景位置之间淡入淡出

1 个答案: