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'>