Javascript 淡入淡出弹出元素

我正在使用此页面中的代码： 在我的网站，它的工作很好。但我正在尝试修改代码，以便当我将鼠标悬停在“热点”上时，显示（右侧）的图片（和文本）将淡入，然后，如果鼠标移出热点，则将淡出。到目前为止，我已经设法使淡入工作，但我不能想出一个淡出工作的方式。我刚才补充说

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

到

ul#cmp li一个跨度偏移量

和

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

到

ul#cmp li a：悬停span.offset，ul#cmp li a：焦点span.offset，ul#cmp li a：活动span.offset

现在，当我在热点上悬停时，它会淡入，但当我移出热点时，它不会淡出

有人能告诉我如何实现我想要的吗？我试过几件事，但都没有成功

多谢各位

我已经将页面中的代码放在一个JSFIDLE中，以便进行实验。CSS的第一部分称为“全球CSS实验”，IMO对此不感兴趣：

---

问题在于您正在更改位置（首先是在边距-9999或其他位置，在您不悬停后，它将返回到边距-您不会看到它消失，您可以设置位置动画，或者不使用它…）

我已经摆弄了一点，所以你可以看到在行动中逐渐消失

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

---

我认为问题可能在于“ul#cmp li a span.offset”选择器上的保证金头寸（-9000px）。淡出可能正在发生，只是在屏幕外。我似乎无法调整其他CSS使其保持不变。我认为这是不可能做到的。一旦离开热点，该区域将移动到指定位置。在移动前使用CSS实现淡入淡出可能是不可能的。