如何將<a>標籤放在另一個（更大）的<a>標籤上？

下面是這種情況：我在頁面中有一系列縮略圖，當用戶使用光標懸停時，我想在每個圖像上顯示幾個關鍵字。每個關鍵字都是指向搜索查詢的錨標籤。並且每個縮略圖（圖像）也應該可點擊（通過關鍵字留下的空白空間）並指向特定頁面。如何將<a>標籤放在另一個（更大）的<a>標籤上？

我已經編碼了所有東西，我只是缺少一種方法來顯示圖像錨點上的關鍵字錨點。我已經嘗試過使用onclick =「window.location.href = ...」，但是當用戶點擊關鍵字時，onclick也會被觸發（例如：如果我按Ctrl +點擊關鍵字，我會搜索關鍵字一個不同的窗口，但主窗口內容也會改變）。

任何幫助將不勝感激。謝謝！

來源

2012-09-21 F. Salvetti

所以基本上，是否關鍵字錨點上的onclick事件正在緩存到縮略圖的onclick事件？ –

什麼是您的HTML，CSS和JavaScript？有可能是有效的HTML解決方法。 –

這是相當普遍的，絕對可以用純HTML和CSS來完成。你也可以用JavaScript來完成，但如果可能的話，我寧願避免這樣做。

這個例子是完全有效的HTML/CSS，並且應該沒有奇怪的瀏覽器渲染問題（甚至可以追溯到IE 6）。

http://jsfiddle.net/2JD76/1/

基本上你有一個包含的元素，在這種情況下一個div，裏面有你的鏈接縮略圖和鏈接的關鍵字。它們在默認情況下隱藏，只有當包含div的部分被徘徊時纔會顯示。

鏈接的縮略圖是絕對定位的，因此它從頁面流中取出，然後允許鏈接的關鍵字出現在最前面。然後，我使用z-indexes來確保關鍵字始終位於比鏈接縮略圖高的層上。

來源

2012-09-22 02:09:31

這正是我所期待的。謝謝閣下的迴應，確實有很大的幫助。祝你有個美好的一天。 –

太棒了！很高興我能幫忙。 –

你不能。這是非法的HTML。附加更改當前位置而不是「更大」的點擊處理程序。

來源

2012-09-21 22:14:49

我打算回覆一個很長的回覆，但是，請在這裏查看我的Jsfiddle。我正試圖解決之前的事情，以及...檢查出來。

http://jsfiddle.net/somdow/KSt6a/

如果你在看代碼，它做你所描述什麼。

在我的jsfiddle，那裏有與圖像空間一個div框（這是wher你的形象會去），的圖像是對的代碼，但不上的jsfiddle所以你會看到ALT標籤 ....無論如何，在鼠標懸停時，它會帶來另一個動態創建文本的div。

所有你需要做的就是更換圖像內容與自己的形象，然後插入鏈接/關鍵字鏈接你想進入這行

.prepend('<div class="portSecRollOver"><div class="portSecInner"></div></div>');

，並堅持你的話在的<div class="portSecInner"> **YOUR WORDS HERE** </div>之間的線

並更改CSS以適合您的需求。

oh AND ps，刪除這條線（下圖），它是動態追加「portSecInner」內部文本的線，因爲你要插入你自己的單詞，那麼你不需要這條線。

$(this).find('.portSecInner').html("<h3 class='h34roll'>" + $(this).find('img').attr("alt") + "</h3>");

來源

2012-09-21 22:25:44 somdow

如何將<a>標籤放在另一個（更大）的<a>標籤上？

回答

相關問題