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

【问题标题】：Trying to apply transition effect to hover尝试将过渡效果应用于悬停
【发布时间】：2014-01-31 18:43:33
【问题描述】：

我的 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;

所以图像淡入，但我无法让它工作。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

WebKit（Chrome、Safari）不支持伪元素的过渡。它应该可以在 Firefox 中运行。

see this q/a

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

【讨论】：

那么解决这个问题的最佳方法是什么？我只需要在将鼠标悬停在主页、关于我们等菜单项上时显示一个图标，但它需要过渡
编辑：谢谢，我会试试的。
您可以在 a 标签内使用额外的“span”而不是使用“:before”

【解决方案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); 
}

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

【讨论】：

【解决方案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/

【讨论】：

我需要颠倒过来。我需要显示 Anchor 标记并显示图像。
同理，只是改变内容，第二个例子用的是图片。

【解决方案4】：

有一些 css “技巧”可以帮助您，可能使用 css 关键帧，但以兼容的方式执行此操作的最佳方法是使用 jQuery（符合您的兼容性需求的 jquery 版本）。正如一些人在 css 上问你的那样，webkit 究竟在哪里支持这种转换，如果我们开始讨论标准，这个问题可能会越来越多，你首先可以做的最好的事情就是更新所有浏览器并检查。

如果您需要或希望在较旧的浏览器版本上保持兼容性，您需要使用 javascript 捕获悬停事件，然后做任何您想做的事情（因为 javascript 可以直接与 DOM 一起工作）并且预加载了 CSS你能做的最多就是改变属性。 IE。使用 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>

【讨论】：