Question

我的CSS：

a:hover {
    position: relative;
}
a:hover:after {
    z-index: -1;
    content: url(icon.jpg);
    display: block;
    position: absolute;
    left: 0px;
    bottom: 20px;
}

当我将鼠标悬停在锚点上时，会显示一个图标： Make image appear on link hover css

我正在尝试应用此功能：

-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;

因此图像会淡入，但我无法使其工作。

Answer 1

WebKit（Chrome，Safari）不支持伪元素的转换。它应该在Firefox中运行。

see this q/a

为了满足您的需要，您可以为链接应用背景图像，并且在悬停时您可以通过设置背景位置来应用过渡。您还可以在span标记内使用额外的a，而不是使用:before伪类。

Answer 2

你可以做背景图片。

a {
   -webkit-transition: all 0.3s ease-in;
   -moz-transition: all 0.3s ease-in;
   -o-transition: all 0.3s ease-in;
}
a:hover {
    position: relative;
    background:url(icon.jpg); 
}

代码只是一个例子，你需要定位背景图像，因为我不知道你的设计尺寸我不能告诉你确切的位置。

Answer 3

Webkit目前支持转换和动画

http://css-tricks.com/transitions-and-animations-on-css-generated-content/

a:hover {
    position: relative;
}
a:after{
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
       transition: all 0.3s ease-in; /*never forget the standard*/
}
a:hover:after {
    z-index: -1;
    content: url(icon.jpg);
    display: block;
    position: absolute;
    left: 0px;
    bottom: 20px;
}

之前使用的例子：

http://jsfiddle.net/d2KrC/88/

使用图像的示例

http://jsfiddle.net/d2KrC/92/

Answer 4

有一些css“技巧”可以帮助你，可能使用css关键帧，但以兼容方式执行此操作的最佳方法是使用jQuery（一个与你的compat需求相匹配的jquery版本）。正如有些人在css上问你，webkit实际上支持这种转换，如果我们开始讨论标准，这个问题可能会增长，你最好能做的就是更新你所有的浏览器并检查。

如果您需要或想要继续使用较旧的浏览器版本，您需要使用javascript捕获悬停事件，然后执行任何您想要的操作（因为javascript可以直接使用DOM）并且预装了CSS你可以做的最多就是改变属性。即使用display：none加载图像，然后使用事件更改此属性。

关于jquery的例子：

$('.link').click(function(){
  $('.foo').fadeIn();
});

$('.link2').click(function(){
  $('.foo2').fadeToggle();
  if($('.link2').text() == 'show or hide') $('.link2').text('click again');
  else $('.link2').text('show or hide');
});

.foo, .foo2{display: none; width: 100px; height: auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  <img class="foo" src="http://joelbonetr.com/images/root.jpg" alt="">
  <a class="link" href="#">show it!</a>
</p>
<p>
  <img class="foo2" src="http://joelbonetr.com/images/root.jpg" alt="">
  <a class="link2" href="#">show or hide</a>
</p>

尝试将过渡效果应用于悬停

4 个答案: