Question

是否可以在悬停时精灵图像之间淡出而不调出CSS中的图像URL？

我有大量的双图像精灵表。我希望每个人都能开启悬停，但如果我必须为每个人创建一个新的元素，那么CSS将会过于臃肿：＆＃34;背景：url（ x ）＆＃34 ;

.frame {
  height: 500px;
  width: 500px;
  overflow: hidden;
}

.sprite {
  background: url(image.png) 0px 0px no-repeat;
  position: relative;
  height: 500px;
  width: 500px;
}

.sprite::after {
  content: "";
  background: url(image.png) -500px 0px no-repeat;
  opacity: 0;
  transition: opacity 0.35s;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.sprite:hover::after {
  opacity: 1;
  transition: opacity: 0.35s;
}

我宁愿在这里打电话给他们：

<div class="sprite frame">
    </div>

Here's a JSFiddle of the effect I want，但我想在HTML中调用图片网址，因此我没有100个不同的CSS元素来调用不同的图片。

Answer 1

嗯。如果您对jQuery解决方案持开放态度，这可能会有所帮助。您可以使用“data alt-src”HTML属性在一个标记中存储两个图像URL，然后在该类上调用jQuery .hover（）函数。

HTML：

<img class="xyz" data-alt src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />

jQuery的：

    var sourceSwap = function () {
    var $this = $(this);
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource);
}

$(function () {
    $('img.xyz').hover(sourceSwap, sourceSwap);
});

http://jsfiddle.net/LmVRZ/2/

我意识到这个演示不包括不透明度转换，但我认为它可以内置。

精灵图像之间的淡入淡出而不会在CSS中调用图像URL

1 个答案: