当鼠标悬停在该垂直图像上时，在图像上显示标题

Question

当我将鼠标悬停在特定图像上时，我想在图像上显示标题，现在当将鼠标悬停在一个图像上时，它会显示在四个图像上。 请帮我解决这个问题。

我使用的代码

<div class="post col-sm-3 col-xs-6 cat-<?php echo get_the_first_category_ID();?>"id="header-img">
    <a href="<?php the_permalink(); ?>" >
        <?php echo g7_image($image_w2, $image_h2, false); ?>
    </a>
    <header>
      <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    </header>
</div>

还有我用的jQuery

$(document).ready(function(){
$(".col-sm-6 h2, .col-sm-3 h2").hide();
});

$(document).ready(function(){
$(".post.col-sm-3.col-xs-6 img").mouseenter(function(){
$(".post.col-sm-3.col-xs-6 h2").show();
});
$(".post.col-sm-3.col-xs-6 img").mouseleave(function(){
$(".post.col-sm-3.col-xs-6 h2").hide();
});
});

在这里我附上一张屏幕截图

Answer 1

您可以使用HTML本地获取。

对于图像，请使用ALT文本：

<img src="images/example.jpg" alt="This is an example">

当用户将鼠标悬停在其上方时，它将显示出来。

您可以对链接执行类似的操作，但可以使用TITLE选项。

<a href="example.com" title="Click to see an example">Example Link</a>

Answer 2

我了解使用Jquery和alt默认行为的愿望，尽管您也可以在Jquery中创建自定义HTML，以读取alt文本并将其插入到自定义HTML中。 那将是更清洁的标记。

但是，假设您保留了现有的标记...

<script>
$(".post.col-sm-3.col-xs-6 img").mouseenter(function(){
    $(this).children("h2").show();
});
$(".post.col-sm-3.col-xs-6 img").mouseleave(function(){
    $(this).children("h2").hide();
});
</script>