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

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显示一个覆盖层，它起作用了。我使用jQuery在悬停在带有类.read-more的链接上时显示覆盖--并且它起作用--但是当我悬停在div.post-img上时，它不再显示覆盖

你知道我哪里出了问题吗？

Answer 1

在hover()“exit”函数中，您直接在元素上设置opacity等：

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

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

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

null

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