Html 在链接悬停时使div淡入淡出

我想做的是把鼠标悬停在一个链接上，我想让一个看不见的图像淡入。当用户停止悬停时，它会再次淡出。 当前起作用的是悬停图像出现，但不起作用的是它不会淡入或淡出，图像只是立即出现或立即消失

我的HTML：

<div class="hover_img"><a href="#">action menu<span><img src="img/screenshot/actionmenu.jpg" alt="image" height="50" /></span></a></div>

---

删除

显示：无和
显示：块。不透明度的过渡将正常工作

`

.hover_img { display:inline }

.hover_img a { position:static; }

.hover_img a span { position:fixed; bottom: 40%; right: 0; display:none; z-index:99; opacity: 0.0; transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; }

.hover_img a:hover span { display:block; opacity: 1.0; transition: opacity .55s ease-in-out; -moz-transition: opacity .55s ease-in-out; -webkit-transition: opacity .55s ease-in-out; }