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

【问题标题】：How to make an image appear when you mouse hover over a link将鼠标悬停在链接上时如何显示图像
【发布时间】：2015-03-06 19:06:39
【问题描述】：

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

【问题讨论】：

jsfiddle.net/o9b5j5op
是的，这里没有发现问题。

标签： html css image google-chrome mouseover

【解决方案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 中运行

【讨论】：