ALT文字顯示在onclick圖片上方

Question

對於普通的台式機用戶，圖像的alt /標題會顯示在：hover上，所以這很好，但對於移動用戶而言，他們看不到它，所以我希望他們可以看到ALT文本，其位置絕對位於圖像的正上方onclick。

這是我得到的：

<img class="prize" title="Best" src="/images/best.png" alt="Best" />

Answer 1

您可能希望使用figcaptions ，它們設置為僅通過媒體查詢或引導程序顯示在移動視圖端口上。

CSS只會使img元素沒有內容添加，這會很麻煩，您可以嘗試使用div包裝img並獲得標題，並使用div::before { content: attr(title) } ：

 div::before {content: attr(title) } 

 <div title="img title"><img src="http://www.w3schools.com/images/compatible_chrome.gif" alt="alt text" /></div> 

Answer 2

這是有效的解決方案： jsfiddle的有效解決方案

 $(document).ready(function() { $('#imgId').click(function() { console.log('image clicked, place your code here'); $('#altDivId').addClass('imgAlt'); $('#altDivId').html($('#imgId').attr('alt')); //setting left $('#altDivId').css('left', $('#imgId').position().left + ($('#imgId').width() - $('#altDivId').width())); //setting top $('#altDivId').css('top', $('#imgId').position().top); }); }); 

 div.imgAlt { position: absolute; right: 0; top: 0; width: 50%; height: 50px; background: red; text-align: center; font-size: 40px; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id='imgId' src="http://placehold.it/350x150" alt='alternate txt'> <div id='altDivId'>