HTML CSS Open on hover button
Set HTML widget to dislay inline or fixed width and add ID “expandbutton”
#expandbutton .expand-flex-button {display: flex;background-color:#D55059;border-radius:6px 0px 0px 6px;padding:6px 0px;}
#expandbutton .expand-flex-button * {display:inline-block;color:white;font-weight:600;font-size:16px;}
#expandbutton .button-icon {padding:0px 12px;transition:transform 400ms;}
#expandbutton .button-link {padding-left:12px;}
#expandbutton.opened .button-icon {transform:rotate(-180deg);}
jQuery(function($){
// AANMELDEN KNOP
if ($(window).width() <= 1024) {
$('#expandbutton .button-icon').click(function(){
$('#expandbutton').toggleClass('opened');
$('#expandbutton .button-link').fadeToggle();
});
$('main').click(function(){
$('#expandbutton.opened').removeClass('opened');
$('#expandbutton .button-link:visible').fadeOut();
});
}
if ($(window).width() > 1024) {
$('#expandbutton').hover(function(){
$(this).toggleClass('opened');
$('#expandbutton .button-link').fadeToggle();
});
}
});