Question

对于普通桌面用户，图像的alt /标题显示在：悬停，这样一切都很好，但对于移动用户，他们看不到它，所以我想让他们能够看到绝对正确定位的ALT文本在图像上方点击。

这是我得到的：

<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

这是工作解决方案：working solution at 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'>

ALT文本显示在图像上方onclick

2 个答案: