当鼠标悬停在链接选项上时切换图片

我对此很陌生。我正在写html，我很好奇，如果有可能在链接悬停时切换到另一个图像。当鼠标悬停在链接选项上时切换图片

2010-03-29 John

是的，你可以，here是一个使用javascript的例子。

2010-03-29 20:09:09 Jason

绝对如此。如果你的代码看起来是这样的：

<div class="menu"> 
<a href="1.html">First</a> 
<a href="2.html">Second</a> 
<a href="3.html">Third</a> 
</div>

一些款式简单地添加到你的头：

<style type="text/css"> 
    /* These are comments, and are ignored by the browser 
      . {dot} is the CSS selector for a class 
      We are selecting all of the "a" elements inside of 
      the element with a class of "menu" 
    */ 
    .menu a { 
     background-image: url('link.gif'); 
     width: 100px; 
    } 

    /* :hover, :active, and :focus are all pseudo-selectors -- they select 
      elements based on their state rather than based on their attributes 
    */ 
    .menu a:hover, .menu a:active, menu a:focus { 
     background-image: url('link_hover.gif'); 
    } 
</style>

一个最好的地方开始学习HTML和CSS是W3Schools。通过他们的例子阅读会给你一个基本知识的坚定把握，然后浏览HTML和CSS这里的问题会让你更深入地了解事情的工作方式。祝你好运！

来源

2010-03-29 20:16:50

正如Sean Vieira所说，常见的方法是根据菜单标记的状态对HTML标记进行CSS修改。

这可能是因为这是基本的：

 
<style> 
div.myimg:hover { 
    background-image:url(p1.png); 
} 

div.myimg { 
    background-image:url(p2.png); 
} 
</style> 

<div class="myimg"> 
<a href="#">my link here</a> 
</div> 
</code>

也有可能，并使用从jQuery库hover功能没有多大的难度。

来源

2010-03-29 20:27:35 poseid

我会强烈建议使用CSS精灵：

http://www.alistapart.com/articles/sprites

概念可能会有点难以在第一把握，但你基本上结合原始图像和悬停状态（即当链接悬停时，您将交换的图像）合并为一个图像，然后一次只显示该图像的适当部分，作为定位的锚点元素上的背景图像。

有这种方法的几个显著的好处：

通过两个图像合并成一个，你消除一个HTTP请求，从而提高页面加载性能的需求。
当使用典型的JavaScript交换效果时，直到用户将鼠标悬停在链接上，才会加载“悬停”图像。这会在加载/渲染时产生明显的视觉震动滞后。使用CSS精灵，两种图像状态一次加载（它们是同一图像的一部分），因此悬停效果是即时的。
一些（包括我自己）会争辩说简单的悬停图像交换属于表示层（CSS），而不是行为层（JavaScript）。这只是一个很好的做法，可以提供更易于维护和易于理解的代码。

当然，这是假定您切换的图片是链接图片本身，而不是页面上的鼠标悬停在链接上时不同的元素。这当然是可能的，但需要JavaScript。

来源

2010-03-30 07:43:16 Bungle

当鼠标悬停在链接选项上时切换图片

回答

相关问题