动态图像文本叠加在特定的图像悬停上

Question

I have multiple dynamic images. When I hover on a particular image it should show me read more button for that image. But currently from my code when I hover the image read more button it is displaying for all the images and when I am doing mouse out it remove all the read more button from the image .

Code is below:

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>

What I exactly want is when I mouseover a particular image it should show me read more button for that image instead of all images and on mouseout it should hide.

What I am doing wrong here. Please help me solve this.

Answer 1

You can do that with JS but its easier with CSS on the container Hover.

HTML

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

CSS

.image-container > a {
   display: none;
}
.image-container:hover > a {
   display: block;
}

If you really want to use JS

HTML

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

JS

$('.image-container').on('mouseenter',function() {
   $('a', this).show();
});
$('.image-container').on('mouseleave',function() {
   $('a', this).hide();
});