Javascript 链接上的悬停操作后图像覆盖悬停失败

我有以下HTML：

<div class="post-box">
       <a href='<?php the_permalink() ?>'>
            <span class='overlay'></span>
            <div class='post-img' style="background-image:url('<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID)) ?>');"></div>
       </a>
       <a class='post-title' href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
       <p><?php the_excerpt(); ?></p>
       <a  class='read-more' href="<?php the_permalink(); ?>">Read more</a>
 </div>

所有这些都很好，我很满意

问题是我在标记中还有一个“阅读更多”按钮，它 — 悬停时 — 我想显示叠加图像以及。我想我应该使用jQuery来实现这一点

我有以下脚本：

$(document).ready(function () {
    $('#srch-term').click(function () {
        if ($('#search-builder').is(":hidden")) {
            $("#search-builder").slideDown("fast");
        } else {
            $("#search-builder").slideUp("fast");
        }
    });
    $('.read-more').hover(
            function () {
                $img = $(this).closest('div').find('.post-img');
                $overlay = $(this).closest('div').find('.overlay');
                $img.css({
                    "opacity": "0.5"
                });
                $overlay.css({
                    "opacity": ".5",
                    "transition": "opacity 200ms ease-in",
                    "-webkit-transition": "opacity 200ms ease-in",
                    "-moz-transition": "opacity 200ms ease-in",
                    "-o-transition": "opacity 200ms ease-in"
                });
            }, function () {
        $img = $(this).closest('div').find('.post-img');
        $overlay = $(this).closest('div').find('.overlay');
        $img.css({
            "opacity": "1.0",
            "height": "300px",
            "width": "100%",
            "background-size": "cover",
            "transition": "opacity 200ms ease-out",
            "-webkit-transition": "opacity 200ms ease-out",
            "-moz-transition": "opacity 200ms ease-out",
            "-o-transition": "opacity 200ms ease-out"
        });
        $overlay.css({
            " background-color": "#f39300",
            "cursor": "pointer",
            "height": "300px",
            "width": "585px",
            "position": "absolute",
            "left": "0",
            "z-index": "10",
            "opacity": "0"
        });
    });
});

脚本工作得很好，但是当我将鼠标悬停在

关闭

按钮上并尝试将

悬停在打开

图像上时，覆盖不再显示

因此，总结一下：

当我使用class

.post img

将鼠标悬停在

div

上时，我使用CSS来显示一个覆盖，它可以工作。当鼠标悬停在带有class

的链接上时，我使用jQuery显示覆盖图 — 它是有效的 — 但当我悬停在外时，当我悬停在
div.post-img

知道我哪里出错了吗？
在
hover（）
的“退出”功能中，您直接在元素上设置
不透明度等：

一旦设置，这些非常特定的样式将覆盖CSS中的任何内容，包括您的
：hover
样式

相反，创建一个与
：hover
具有相同样式的类，并在链接悬停时添加/删除该类。这也使您不必保持jQuery和CSS样式的同步


$（文档）.ready（函数（）{
$（'#srch term'）。单击（函数（）{
如果（$（“#搜索生成器”）是（“：隐藏”））{
$（“#搜索生成器”）.slideDown（“快速”）；
}否则{
$（“#搜索生成器”）.slideUp（“快速”）；
}
});
$（'.read more'）。悬停(
函数（）{
$img=$（this.closest（'div'）。find（'.post-img'）；
$overlay=$（this.closest（'div'）。find（'.overlay'）；
$img.addClass（‘悬停’）；
$overlay.addClass（'hovered'）；
},
函数（）{
$img=$（this.closest（'div'）。find（'.post-img'）；
$overlay=$（this.closest（'div'）。find（'.overlay'）；
$img.removeClass（'hovered'）；
$overlay.removeClass（'hovered'）；
});
});
.post-img{
高度：300px；
宽度：100%；
背景尺寸：封面；
过渡：不透明度200ms缓解；
-webkit过渡：不透明度200ms缓解；
-moz过渡：不透明度200ms缓解；
-o型过渡：不透明度200ms缓解；
}
.post-img:悬停，.post-img.悬停{
不透明度：0.5；
}
覆盖层{
背景色：#f39300；
光标：指针；
高度：300px；
宽度：585px；
位置：绝对位置；
左：0；
z指数：10；
不透明度：0；
}
span.overlay:hover、.overlay.hover{
不透明度：.5；
过渡：不透明度200ms缓和；
-webkit过渡：不透明度200ms，易于安装；
-moz过渡：不透明度200ms，易于调节；
-o型过渡：不透明度200ms；
}

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

听起来这是一个很好的解决方案，保罗，我现在要试一试，我会很快报告结果。非常感谢。
$(document).ready(function () {
    $('#srch-term').click(function () {
        if ($('#search-builder').is(":hidden")) {
            $("#search-builder").slideDown("fast");
        } else {
            $("#search-builder").slideUp("fast");
        }
    });
    $('.read-more').hover(
            function () {
                $img = $(this).closest('div').find('.post-img');
                $overlay = $(this).closest('div').find('.overlay');
                $img.css({
                    "opacity": "0.5"
                });
                $overlay.css({
                    "opacity": ".5",
                    "transition": "opacity 200ms ease-in",
                    "-webkit-transition": "opacity 200ms ease-in",
                    "-moz-transition": "opacity 200ms ease-in",
                    "-o-transition": "opacity 200ms ease-in"
                });
            }, function () {
        $img = $(this).closest('div').find('.post-img');
        $overlay = $(this).closest('div').find('.overlay');
        $img.css({
            "opacity": "1.0",
            "height": "300px",
            "width": "100%",
            "background-size": "cover",
            "transition": "opacity 200ms ease-out",
            "-webkit-transition": "opacity 200ms ease-out",
            "-moz-transition": "opacity 200ms ease-out",
            "-o-transition": "opacity 200ms ease-out"
        });
        $overlay.css({
            " background-color": "#f39300",
            "cursor": "pointer",
            "height": "300px",
            "width": "585px",
            "position": "absolute",
            "left": "0",
            "z-index": "10",
            "opacity": "0"
        });
    });
});

$overlay.css({
  // ...
  "opacity": "0"
});