对链接进行悬停操作后，图像叠加悬停失败

Question

我有以下 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>

这是CSS，它会在悬停时在图像上覆盖：

.post-img{
    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;    
}
.post-img:hover{
  opacity:0.5;
}
span.overlay {
    background-color: #f39300;
    cursor: pointer;
    height: 300px;
    width: 585px;
    position: absolute;
    left: 0;
    z-index: 10;
    opacity: 0;
}
span.overlay:hover {
  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;
}

以上所有功能都运行良好，我对此感到满意。

问题是我在标记中还有一个“阅读更多”按钮， — 当悬停在上面时 — 我也想显示叠加图像。我想我会使用 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"
        });
    });
});

该脚本运行良好，但是当我悬停off 按钮并尝试悬停on 图像时，覆盖不再出现。

总结一下：

当我将鼠标悬停在类 .post-img 的 div 上时，我使用 CSS 来显示覆盖，并且它可以工作。我使用 jQuery 将鼠标悬停在具有类 .read-more —  的链接上时显示叠加层，它可以工作 — 但是当我将鼠标悬停在外面时，当悬停在 div.post-img 上时它不再显示覆盖层

关于我哪里出错了有什么想法吗？

Answer 1

在您的 hover()“退出”函数中，您正在设置 opacity 等。直接在元素上：

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

一旦设置，这些非常具体的样式会覆盖 CSS 中的任何内容，包括您的 :hover 样式。

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

$(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.addClass('hovered');
      $overlay.addClass('hovered');
    },
    function() {
      $img = $(this).closest('div').find('.post-img');
      $overlay = $(this).closest('div').find('.overlay');
      $img.removeClass('hovered');
      $overlay.removeClass('hovered');
    });
});

.post-img {
  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;
}

.post-img:hover, .post-img.hovered {
  opacity: 0.5;
}

span.overlay {
  background-color: #f39300;
  cursor: pointer;
  height: 300px;
  width: 585px;
  position: absolute;
  left: 0;
  z-index: 10;
  opacity: 0;
}

span.overlay:hover, .overlay.hovered {
  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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="post-box">
  <a href='#'>
    <span class='overlay'></span>
    <div class='post-img' style="background-image:url('http://placehold.it/200');"></div>
  </a>
  <a class='post-title' href="#">Title</a>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <a class='read-more' href="#">Read more</a>
</div>