html - 将鼠标悬停在链接上时如何显示图像

我一直在互联网上搜寻一种将鼠标悬停在链接上时可以显示图像的方法。我发现一种可行的方法，但在chrome中不起作用。

ul#nav li a.orange {
	color: #FFF;
	text-decoration:none;
	padding-top: 10px;
	padding-right: 25px;
	padding-bottom: 10px;
	padding-left: 25px;
	background-color: #f47521;
	border: solid;
	border-width:thin;
}

 a.orange img { display:none; }
 a.orange:hover img.showspanel {
 	display:block;
	position:absolute;
	margin-left:350px;
   }

#orange{
	background-color: #f47521;
	color: #000;
	border-radius:4px;
	width:975px;
	height:36px;
	padding-left:25px;
}



	

<div id="nav">
<ul id="nav">
  <li> <a  class="orange" href="#"><strong>Shows<img class="showspanel" src="../images/shows.png"  alt="shows" /></strong>
</li>
</ul>
</div>

最佳答案

您的代码有效，但是总有跨浏览器兼容性的方法。

<div id="nav">
	<ul id="nav">
		<li>
	  		<a onmouseout="hideImg(imageOne)" onmouseover="showImg(imageOne)" class="orange" href="#">
	  		<strong>
	  			Shows
	  			<img style="display:none;" id="imageOne" class="showspanel" src="../images/shows.png"  alt="shows" />
			</strong>
		</li>
	</ul>
</div>
<script>

function showImg(image) {
    var img = document.getElementByI(image);
    img.style.display = "block";
}
function hideImg(image) {
    var img = document.getElementByI(image);
    img.style.display = "none";
}
</script>

那应该在chrome firefox和IE中运行