javascript - 从链接或段落或标题或 alt 标签中提取特定文本并在同一页面但不同位置再次显示

Question

我正在尝试在同一页面的另一部分(图像下方)复制/显示文本 Java Bean(访问 http://www.miracleflooring.ca/cork.html 以了解其工作原理)。现在，当您将鼠标悬停在缩略图上时，我会显示信息标题和价格，当鼠标移开时，信息会隐藏。

我的客户要求我在每张图片下显示标题和价格(每个 div 都有类元素)，我想找到一种方法来做到这一点，而不必为每个元素手动重新做事。 有没有办法使用 css/javascript/php 这样做(我希望我清楚我需要做什么)。

<div class="item">
     <a href="#"><img src="imgs/products/cork/java-bean.jpg" alt="Java Bean" width="132" height="132" /></a>
     <div class="caption">
          <a href="imgs/products/cork/java-bean.jpg" rel="prettyPhoto[cork]" title="Java Bean">Java Bean</a>
          <p class="price">$4.99 sq-ft</p>
     </div>
</div>

我知道有些代码看起来有些矫枉过正，但它是那样做的，需要做很多工作才能改变。

我不知道该怎么做，我仍然不确定最好的方法是什么，但非常感谢您的帮助!

编辑: 我看到 karim79 回答了一些可能有帮助但不确定这是否是我需要的(如何实现)extract text from tag

Answer 1

在你的 CSS 中试试这个:

.item {position: relative; margin-bottom: 30px;}
.item .caption {position: absolute; bottom: -20px;}

这应该足够接近，您可以进一步调整它。 “margin-bottom”将扩大每个元素下方的可用空间，更大的负“bottom”会将标题文本向下移动。