将鼠标悬停在该特定图像上时，在图像上显示标题

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，读取替代文本并将其插入到自定义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>