Javascript 特定图像悬停上的动态图像文本覆盖

我有多个动态图像。当我停留在一个特定的图像上时，它会显示该图像的“阅读更多”按钮。但是现在 从我的代码中，当我将鼠标悬停在“图像读取更多”按钮上时，它将为我显示 所有的图片，当我做鼠标出它删除所有的阅读更多 按钮从图像中删除

代码如下：

echo '<div class="teacher-image"><img class="img-hover" src="';
                                            the_field('teacher_image', $this_event);
                                        echo '" alt="';   the_field('teacher_name', $this_event);echo '"></div>';
echo '<div class="teacher-link">';
echo"<a class='theme-button small-button purple-button popups' data-toggle='modal' data-target='#myModal-front'  id='teacher-detail' href='javascript:void(0);' onclick='teacher_id($this_event);'>Read more</a>";

<script>
    $(document).ready(function(){
        $(".purple-button").css("opacity", 0);
        $(".img-hover").mouseover(function(){

            $(".purple-button").css("opacity",2);
        });
        $(".img-hover").mouseout(function(){
            $(".purple-button").css("opacity",0);
        });
        $(".purple-button").hover(function() {
            $(this).css("opacity",2);
        });
    });
</script>

echo'；
回声'；
回声“；
$（文档）.ready（函数（）{
$（“.purple button”）.css（“不透明度”，0）；
$（“.img hover”）.mouseover（函数（）{
$（“.purple button”）.css（“不透明度”，2）；
});
$（“.img hover”）.mouseout（函数（）{
$（“.purple button”）.css（“不透明度”，0）；
});
$（“.purple button”）.hover（函数（）{
$（this.css（“不透明度”，2）；
});
});

我真正想要的是，当我将鼠标移到一个特定的图像上时，它应该显示该图像的“阅读更多”按钮，而不是所有图像，并且在鼠标移出时它应该隐藏

---

我在这里做错了什么。请帮我解决这个问题。

你可以用JS来解决这个问题，但在容器悬停时使用CSS更容易

HTML

<div class="image-container">
   <img src="img.jpg" />
   <a href="#">Read more</a>
</div>

<div class="image-container">
   <img src="img.jpg" />
   <a href="#">Read more</a>
</div>

如果你真的想用JS

HTML

<div class="image-container">
   <img src="img.jpg" />
   <a href="#">Read more</a>
</div>

<div class="image-container">
   <img src="img.jpg" />
   <a href="#">Read more</a>
</div>