Question

我有多个动态图像。当我将鼠标悬停在特定图像上时，它应该显示我为该图像读取更多按钮。但目前从我的代码当我悬停图像时，它正在显示更多按钮所有的图像，当我做鼠标时，删除所有阅读更多图像上的按钮。

代码如下：

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>

我真正想要的是当我将鼠标悬停在特定图像上时，它应该显示我为该图像而不是所有图像读取更多按钮，并且在鼠标输出时它应该隐藏。

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

Answer 1

你可以用JS做到这一点，但在容器Hover上使用CSS更容易。

<强> 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;
}

如果你真的想使用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();
});

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

1 个答案: