我正在尝试做的是将鼠标悬停在链接上，我希望隐藏的图像可以淡入。当用户停止悬停时，它会再次淡出。 当前工作的是悬停图像出现但不起作用的是它不会淡入或淡出，图像会立即显示或立即消失。
我的HTML：
<div class="hover_img"><a href="#">action menu<span><img src="img/screenshot/actionmenu.jpg" alt="image" height="50" /></span></a></div>
我的CSS：
.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; }