javascript - 当鼠标悬停在该特定图像上时在图像上显示标题

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>