link 上的悬停操作后图像叠加悬停失败

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

以上所有都运行良好，我很满意。

问题是我在标记中也有一个 "Read More" 按钮，当鼠标悬停在该按钮上时，我也想显示叠加图像。我想我会使用 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 图像时，叠加层不再出现。

总结一下：

我使用 CSS 将鼠标悬停在 div 和 class .post-img 上时显示叠加层并且它有效。我使用 jQuery 将鼠标悬停在 link 和 class .read-more —⟩ 上时显示覆盖超过 div.post-img

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

Answer 1

在您的 hover() "exit" 函数中，您正在设置 opacity 等 直接在元素上 :

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

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

相反，创建一个与 :hover 具有相同样式的 class，当悬停 link 时，只是 add/remove class。这也使您不必保持 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>

link 上的悬停操作后图像叠加悬停失败

Image overlay hover fails after hover action on link

html

javascript

css

jquery

hover