使用替代文字懸停效果

我試圖爲圖像創建懸停效果，但我不能在img標籤上添加標題。所以我在考慮在懸停效果上使用替代文字屬性。使用替代文字懸停效果

<img width="300" height="169" src="300x169.jpg" class="attachment-medium" alt="sometexthere">

有沒有我可以使用的任何jQuery插件或任何其他方法來提取alt文本並使用它？

來源

2015-11-13 ivhysenbelli

_「我不能在img標籤上添加標題」_爲什麼不呢？ – j08691

只需創建一個隱藏的小DIV。在翻轉圖像時，觸發一個JS函數，該函數使用文本填充該函數，並將其位置放在鼠標所在的位置附近。 – durbnpoisn

當圖像無法顯示時，將顯示「alt」。 – Anthony

像評論，我不知道爲什麼你不能添加標題，無論是在代碼或在事後。

$(document).ready(function(){ 
    $("img").each(function(){ 
     $(this).attr("title", $(this).attr("alt")); 
    }); 
});

這將創建一個圖像的標題，在不能修改文本代碼本身的情況下。你也可以將使用jQuery UI，使工具提示：https://jqueryui.com/tooltip/

也可以用.hover()使自己的自定義提示：https://api.jquery.com/hover/

來源

2015-11-13 21:47:00 Twisty

我試圖添加一個自定義的CSS，但因爲我用一些插件不能在這段代碼上寫wordpress。 thnx的解決方案 – ivhysenbelli

你不能寫這段代碼，但你仍然接受答案？ – dippas

@dippas我認爲OP意味着他們不能編輯代碼。也許它來自傳統數據庫，例如'img'只是缺少'title'屬性，但確實有'alt'。 – Twisty

正如@durbnpoisn提到的，你可以創建一個div和mouseover設置show/hide - mouseout給予tooltip的效果。

<img width="300" height="169" src="300x169.jpg" class="attachment-medium" alt="sometexthere"> 
    <div></div> 

$('img').mouseover(function() 
{ 
    $('div').text($(this).attr("alt")); 
    $('div').show(); 
}).mouseout(function() 
{ 
    $('div').hide(); 
});;

http://jsfiddle.net/1fe1sanv/1/

來源

2015-11-13 21:58:20 DinoMyte

有關使用工具提示是什麼？這裏是CSS：

#tooltip {position: relative; display: block;} 
    #tooltip a span {display: none; color: #FFFFFF;} 
    #tooltip a:hover span {display: block; position: absolute; 
     width: 250px; background-color: #048042; left: 300px; 
     top: -10px; color: #FFFFFF; padding: 20px; 
     border: 4px solid #c4c3c3;} 
    #tooltipBottom {position: relative;} 
    #tooltipBottom a span {display: none; color: #FFFFFF; } 
    #tooltipBottom a:hover span {display: block; position: absolute; 
     width: 250px; background-color: #520e4e; left: 300px; 
     top: -300px; color: #FFFFFF; padding: 20px; 
     border: 4px solid #ffffff;}

你會想，直到你得到它看起來你希望它看起來的方式玩弄的位置，寬度，邊框，顏色，字體等。

下面是HTML：

<p id="tooltip"><img src="YOURIMAGE" /><a href="#" 
     style="text-decoration: none;"><img src="TOOLTIPIMAGE" alt="" 
     width="20" height="20" border="0" style="margin: 2px 0px 0px 
     2px" /><span>DESCRIPTION YOU WANT SHOWN</span></a></p>

關於這樣做的好處是，它不依賴於JavaScript，您可以用文字，圖像等我已經用它在過去的教會使用那就是希望在經文中使用彈出引用，即對約翰福音3:16的引用將顯示帶有經文文本的彈出式窗口。

來源

2015-11-14 01:43:47

使用替代文字懸停效果

回答

相關問題