javascript - 在链接上悬停操作后图像叠加悬停失败

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"
        });
    });
});

脚本效果很好，但是当我将鼠标悬停在关闭按钮上并尝试将鼠标悬停在上图像时，叠加层不再出现。

总结一下:

当我将鼠标悬停在 .post-img 类的 div 上时，我使用 CSS 显示叠加层并且它有效。当我将鼠标悬停在带有类 .read-more 的链接上时，我使用 jQuery 来显示叠加层—— 并且它有效⟩—— 但是当我悬停在 div 上时，它不再显示叠加层。后置图像

关于我哪里出错的任何想法？

Answer 1

在您的hover()“退出”函数中，您正在设置不透明度等。直接在元素上:

$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>