當鼠標懸停在鏈接選項上時切換圖片

我對此很陌生。我正在寫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

當鼠標懸停在鏈接選項上時切換圖片

回答

相關問題