Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1170837

    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

    #1170942

    Hey Richard,

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

    Best regards,
    Jordan Shannon

    #1170968

    Hey Jordan

    Sure thing.

    Richard

    #1171001

    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

    #1171005

    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

    #1171179

    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

    #1171373

    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

    #1171675

    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

    #1171743

    Hey Ismael

    That works perfectly, thank you for your help.

    Richard

    #1171898

    Hi,

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

    Best regards,
    Jordan Shannon

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.