Question

当我将鼠标悬停在链接上时，我一直在搜索互联网，以便显示图像。我找到了一种方法，但它在chrome中不起作用。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您的代码可以正常运行，但仍有办法实现交叉浏览器的兼容性。

＆＃13;

<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>

＆＃13;

应该在chrome firefox和IE

中运行

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

1 个答案: