Hoverbox on image mouseover

Helpdesk Website Builder
1

Hi all, I need to show a hoverbox when the user hovers their mouse over an image. Anyone done this or know how to implement it in Sitejet using custom code? Currently Sitejet only allows an overlay to show on element scrolled into view or page load. Should I just design an overlay to work when scrolled into view and then edit the CSS to work on hover instead? Thanks

2

Hi Paul! Welcome to SiteJet Community!
Here is how you can do a HoverBox in SiteJet (no audio)

Here is the (s)css Iā€™ve used:

body:not(.edit){
    .hoverbox{
        //React on hover
        &:hover{
           .hoverbox-hover-container{
               opacity: 1;
           } 
        }
        //Initial css props
        position: relative;
        .hoverbox-hover-container{
            transition: all 0.3s ease;
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height:100%;
            opacity: 0;
            .inner{
                //Align hover content in center
                display: flex;
                align-content: center;
                justify-content: center;
                text-align: center; //for text
            }
        }
    }
}
2 Likes
3

Thanks Lucian for the quick response. Iā€™ve just started the site today so will test this out soon and let you know how I get on!

1 Like
4

Hi Lucian - how can I create a popup that appears as a separate box on mouseover/hover? See attached image, where user hovers mouse over Logo box then a logo popup/overlay appears.
Thanks
Paul

hover
hover2092Ɨ916 163 KB

5

Hi! Right now, in SiteJet you canā€™t trigger an overlay from a ā€œmouse hoverā€ event but, you can set to display the overlay on click, see how is done here: Adding overlays - Sitejet Help

6

Yes Iā€™m aware of the ability to do on-click, but I need to do it on mouseover :slight_smile:
Iā€™ve contacted a developer who can hopefully help me.
Thanks

7

Hi! I donā€™t know if it helps.
You can raise the click event from the trigger element from the mouseenter event.
It will basically open the overlay popup on mouse hover(enter).
Here is the JS code, just replace the #ed-63954136 with your trigger element ID.

$('#ed-63954136').mouseenter(function(){
    $('#ed-63954136 a').trigger('click');  
});
1 Like
8

Thanks Lucian, my developer came up with something similar:

jQuery("#ed-64263245").mouseenter(function() {
    jQuery("#ed-64263320").attr('style','visibility: visible;height: auto;display: block;position: absolute;top: 489px;z-index: 9;');
}).mouseleave(function() {
   jQuery("#ed-64263320").attr('style','visibility: hidden;height: auto;display: block;position: absolute;top: 489px;z-index: 0;');
});

However it appears to be bugging out after the user navigates away from the page and back again. Any ideas?

Link to preview site: http://1df4e3-502b8.preview.sitejet.io/

9

Hi! What I see is that on the Ryeqo Promotional Materials - Ryeqo Digital Launch page the ā€œSALES AIDā€ overlay is triggered on page load.
Try to set all overlays trigger to ā€œNo automatic triggerā€.

Screenshot 2021-07-02 at 13.44.50
Screenshot 2021-07-02 at 13.44.50634Ɨ1380 51.1 KB

I guess this is what I think the issue might beā€¦

10

Itā€™s funny you should say that, because this morning I noticed that as well and asked Sitejet and my dev the same question! I will turn them off and see how it goesā€¦

11

Seems to have done the trick! Thank you Lucian! Although I suspected that, I wouldnā€™t have probably tried it without confirmation it might be the issue. Legend

1 Like
12

Hi Lucian - If ā€˜clickā€™ shows the overlay, what is the trigger function to hide the overlay on mouseleave?

14

Hi Paul, I donā€™t know how to trigger the close event on the overlay. I donā€™t know how the Overlay JS works internally.
My solution was more of a ā€œhackā€, to use what is currently possible with the Overlay element.
Your developer code directly changes some Overlay CSS properties (like:visibility).

Maybe someone from the SJ Team can help you.

15

Also, why the aā€™ after the element ID?

16

Here Iā€™m selecting the A tag of the Button element. The A tag is the actual link.

1 Like
17

I tried but they couldnā€™t help. The problem Iā€™m having is my developerā€™s code seems to work but then the overlays are completely left invisible in the CMS, thus leaving them uneditable in future. Itā€™s as if the CMS is bugged because it is responding to the JS code in the back-end when the code should only be executing on the front-end.

18

Yesā€¦ This is why Iā€™ve used the Button Element to trigger the overlay. I guess the Overlay JS is creating and moving some elements in the page DOM, so I think is not just a simple CSS change.

Iā€™ve changed your dev. code, so it should work only in preview/live (not in the CMS).

jQuery("body:not(.edit) #ed-64263245").mouseenter(function() {
    jQuery("#ed-64263320").attr('style','visibility: visible;height: auto;display: block;position: absolute;top: 489px;z-index: 9;');
}).mouseleave(function() {
   jQuery("#ed-64263320").attr('style','visibility: hidden;height: auto;display: block;position: absolute;top: 489px;z-index: 0;');
});

P.S. You can create your completely custom overlay mechanism with a bit of JS and CSS (and not use the SiteJet Overlay option). Or try to use https://atomiks.github.io/tippyjs/ ā€¦ see if it fits your needs.

19

Iā€™ve been trying the Show/Hide code instead and that seems to be working better in terms of not messing up the overlays in the DOM.
Will look at your body:not now and see how that goesā€¦
Thanks