單擊後如何保持標題屬性值可見？

Question

考慮下面的HTML標記：

<img src="info.png" title="Password should contain 6-10 characters"> 

在輸出中，當用戶在圖像上懸停時，顯示在彈出式標題屬性的值。向用戶顯示信息是一個不錯的主意。

但是，當用戶單擊圖像（請注意，用戶可能傾向於點擊，而不是徘徊）此信息消失

我能做些什麼（使用jQuery爲例），以保持信息可見（即使用戶點擊）只要鼠標指針在圖像上？

我嘗試以下，但這並沒有解決這個問題：

jQuery('img[src="info.png"]').click(function(event){ 
    event.preventDefault(); 
     }); 

編輯： 有沒有辦法做到「點擊等於徘徊」 jQuery的？

Answer 1

img的顯示屏title s或a的顯示屏link s依賴於瀏覽器，您無法控制它。如果你想擁有自己的行爲，並確保這種行爲是跨瀏覽器，你將需要：

1. 通過刪除所有title和 alt屬性
2. 重新實現自己的工具提示擺脫默認瀏覽器行爲利用現有的許多 庫

好運

Answer 2

你必須創建自己的提示之一。

<img src="info.png" alt=""> 
<span>Password should contain 6-10 characters</span> 

你並不需要JavaScript的，純CSS是不夠的：

img[src=info.png] + span { 
    display: none; 
} 
img[src=info.png]:hover + span { 
    display: inline; 
} 

編輯：如果你不想碰你的HTML，您可以創建腳本的提示。下面是一個jQuery示例：

var img = $("img[src=info.png]"); 
$("<span>").text(img.attr("title")).insertAfter(img); 
img.attr("title", "");