Tagged: , , , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 6, 2020 at 8:26 pm #1170837
    raslade

    Hi there

    Is there a way, using CSS, to change the colour of the post title and overlay when you hover over any part of the post entry.

    Currently using:

    .slide-entry:hover .slide-entry-title.entry-title a {
	color: #02be9a !important;
}
.slide-entry:hover .image-overlay {
    opacity: .7 !important; 
}

    But the overlay doesn’t activate until you’ve hovered over the title first.

    Thanks
    Richard

    January 7, 2020 at 7:21 am #1170942
    Jordan Shannon

    Hey Richard,

    Please provide a link to the site/page in question so we can look into this further.

    Best regards,
    Jordan Shannon

    January 7, 2020 at 9:49 am #1170968
    raslade

    Hey Jordan

    Sure thing.

    Richard

    January 7, 2020 at 11:38 am #1171001
    Ismael

    Hi,

    Thank you for the update.

    The css code above works fine on our end. The title and the overlay changes to #02be9c when you hover the article. Where are you testing it?

    Best regards,
    Ismael

    January 7, 2020 at 11:49 am #1171005
    raslade

    Hey

    It works kind of OK. But if you hover over the title first on a newly loaded page, the overlay does not change. It’s only once you hover over the overlay, that the desired result is achieved.

    Richard

    January 7, 2020 at 8:07 pm #1171179
    Victoria

    Hi raslade,

    Could you please clear the cache, check again and get back to us.

    It is working fine on my end.

    Could you please attach a screencast of the issue?

    Best regards,
    Victoria

    January 8, 2020 at 10:25 am #1171373
    raslade

    Victoria

    I’m not sure why you can’t replicate the issue. I’ve checked on multiple browsers and machines.

    Before I cast could you try just moving the cursor to hover over the title, whilst avoiding going near the image.

    Richard

    January 9, 2020 at 3:35 am #1171675
    Ismael

    Hi,

    Thank you for the clarification.

    Try to add the following snippet in the functions.php to trigger the overlay effect as soon as you hover the post title.

    function ava_custom_script_mod(){
?>
<script>
(function($){
   $('.slide-content').on('mouseover', function() {
      $(this).prev('.slide-image').trigger('mouseenter');
   });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_mod');

    Best regards,
    Ismael

    January 9, 2020 at 10:58 am #1171743
    raslade

    Hey Ismael

    That works perfectly, thank you for your help.

    Richard

    January 9, 2020 at 6:07 pm #1171898
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.