Question

我正在使用此页面中的代码： http://green-beast.com/experiments/css_map_pop.php在我的网站上，它运行正常。但是我正在尝试修改代码，以便当我悬停一个＆＃34;热点＆＃34;时，显示（向右）的图片（和文本）将淡入然后，如果鼠标移出热点，会淡出。到目前为止，我已经设法使工作淡出，但我无法找到淡出工作的方法。我刚刚添加了

opacity: 0;
transition: opacity .6s ease-in-out;

到ul#cmp li a span.offset和

opacity: 1.0;
transition: opacity .6s ease-in-out;

到ul#cmp li a:hover span.offset, ul#cmp li a:focus span.offset, ul#cmp li a:active span.offset。

现在，当我徘徊在一个热点时，它会淡入，但当我离开热点时，它也不会淡出。

有人可以告诉我如何实现我的目标吗？我尝试了几件事但没有成功。

谢谢。

我已将页面中的代码放在jsfiddle中，因此很容易进行实验。 CSS的第一部分称为＆＃34;实验全局CSS＆＃34;，不感兴趣，IMO： http://jsfiddle.net/fidnut/r52kkrbw/

Answer 1

问题在于你正在改变头寸（起初这是保证金-9999或者什么，在你没有悬停之后，它会回到那个边缘 - 你不会看到它会逐渐消失，你可以为这个位置设置动画，或者不使用它......）

我已经摆弄了一下，所以你可以看到淡出的动作......

ul#cmp li a span.offset { 
   // margin-top : -9000px;
   //margin-left : -9000p
   position : absolute;
   opacity: 0;
   transition: opacity .6s ease-in-out;
 }

fiddle update

在弹出元素中淡入并淡出

1 个答案: