带有悬停覆盖并显示介绍文本的 Joomla 介绍图像

Question

我被困住了。任何帮助表示赞赏。

目标... 当在 Joomla 内容博客视图中显示介绍图片时，我希望在悬停时将其淡化到 20%，并在介绍图片的顶部以黑色显示介绍文本。

到目前为止我做了什么...... 从

更改 Joomla 核心文件 blog_item.php

<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>

到

<?php echo '<div id="box">'; ?>
<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
    <?php echo '<div id="overlay">'; ?>
        <?php echo $this->item->introtext; ?>
    <?php echo '</div>'; ?>
<?php echo '</div>'; ?>

并添加了用于不透明度和定位的 CSS。

问题是... div 覆盖 悬停在介绍图像链接上。所以它不再是可点击的。

我的问题...我怎样才能给 div 覆盖 与介绍图像相同的 href？

感谢您的帮助。

Answer 1

我现在能想到的最简单的方法是在覆盖 div 上实现一个点击监听器，并使用 window.location 将用户带到所需的 url