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

Question

我一直在互联网上搜索如何在我将鼠标悬停在链接上时显示图像。我找到了一种可行的方法，但它不适用于 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>

Answer 1

您的代码可以工作，但总有办法实现跨浏览器兼容性。

<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 中运行