Наложение изображений парения терпит неудачу после парения действия по ссылке

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 изображение больше не появляется оверлей.

Итак, подведем итог:

Я использую CSS, чтобы показать наложение при наведении на div с классом .post-img, и она работает. Я использую 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>