Question

我正在将旧网站更新为响应式设计。我拼凑了一些脚本以获得我想要的外观，并且当它工作时绝对不会声称完全理解它，所以我可以使用一些简单的单词建议。我的原始网站使用子内容div来显示/隐藏字幕。请参阅此处：http://www.nancychuang.com/projects/mtc/ ，了解图片下方的字幕链接。对于新网站，我购买了一个廉价的模板，并一直在修改它。

我不知道如何将原始标题应用到新模板中，因为原始文件是使用嵌套表的极其基本方法定位的。在目前的这个模板中，似乎不可能在图像下面放置文字，所以我需要一些不引人注目的东西。能够通过使用来自css-tricks SlideinCaptions的代码使figcaption脚本工作。因此，新网站将如下所示：http://nancychuang.com/test/MTC.html。

    figure { 
display: block; 
position: relative; 
float: left; 
overflow: hidden; 
margin: 0 20px 20px 0; } 

    figcaption { 
position: absolute; 
    background: black; 
    background: rgba(0,0,0,0.75); 
    color: white; 
    padding: 10px 20px; 
    opacity: 0; 
    -webkit-transition: all 0.6s ease; 
    -moz-transition: all 0.6s ease; 
    -o-transition: all 0.6s ease; } 

    figure:hover 
    figcaption { opacity: 1; } 

figure:before { 
    content: "?"; 
    position: absolute; 
    font-weight: 800; 
    background: black; 
    background: rgba(255,255,255,0.75); 
    text-shadow: 0 0 5px white; 
    color: black; 
    width: 24px; height: 24px; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius: 12px; 
    text-align: center; 
    font-size: 14px; 
    line-height: 24px; 
    -moz-transition: all 0.6s ease; 
    opacity: 0.75; } 

    figure:hover:before { opacity: 0; } 
    .cap-bot:before { bottom: 10px; left: 10px; } 
    .cap-bot figcaption { left: 0; bottom: -30%;} 
    .cap-bot:hover figcaption { bottom: 0; }

这个figcaption脚本适用于触摸屏，虽然老实说我不知道为什么！没有提及触摸或点击代码（因此我无法弄清楚如何对“点击”进行相反的操作）。在桌面计算机上，将鼠标悬停在图像上会隐藏字幕，在移动设备上，标题会在激活后卡住。由于文本在移动设备上比例较大，我绝对希望用户能够隐藏它。如果有一种方法可以触摸屏幕上的任何地方以使标题消失，或者像我在原始隐藏版本中添加链接以供用户点击：

<DIV id="subcontent1">
<p class="caption"><a href="http://maetaoclinic.org/" target="blank">Mae Tao Clinic</a>, started by Dr. Cynthia Maung in 1989, is the primary care facility for many Burmese living on the border. Helping refugees, uninsured migrant residents of Mae Sot, as well as Burmese who cross the border due to difficulties obtaining care on the other side, the clinic today offers a comprehensive range of services.

<p class="caption"><a class="caption" href="javascript:dropdowncontent.hidediv('subcontent1')">HIDE</a></p></td>
</DIV>

*相关：使用figcaption，你可以像我原来的子内容div一样指定悬停块的宽度吗？我不清楚24px在代码中指的是什么...最小宽度，也许？但没有最大值？

感谢您的帮助！谢谢！

Answer 1

无论如何我都会回答......

在你的CSS中，你有：

figcaption { opacity: 0; }

这意味着默认情况下无法看到figcaption。

你有：

figure:hover figcaption { opacity: 1; }

这意味着当悬停包含的数字时，将会看到figcaption。

以上两种风格主要是在播放图片时出现标题的原因，以及在移动设备的情况下 - 点击图片时。

您询问如何在移动设备上显示隐藏字幕的方法。简单的答案是 - 基于上面的CSS - 点击图片外的任何地方，可以解释为失去焦点的图片。

但是，你真的想在移动设备上产生这种影响吗？它不是很直观。有一些方法可以根据设备更改样式。例如，如果在移动设备上查看，则figcaption应始终显示在图片下方，这对我来说更有意义。这可以通过使用媒体查询CSS来定位不同的屏幕尺寸来实现。

我建议你做一些在线CSS教程来学习CSS可以做的所有很酷的事情。绝对值得花时间，特别是你已经定制了一个网站。

Answer 2

作为一种解决方案，您需要检查设备是否触摸，因此CSS可以根据结果进行定义。

@media (-moz-touch-enabled: 0), (pointer: fine), (-ms-high-contrast: none) {
  figure:hover:before {
    opacity: 0;
  }
  .cap-bot:before {
    bottom: 10px;
    left: 10px;
  }
  .cap-bot figcaption {
    left: 0;
    bottom: -30%;
  }
  .cap-bot:hover figcaption {
    bottom: 0;
  }
}

隐藏在移动设备上的figcaption

2 个答案: