Background colour change on rollover

[Toby]

This post is deleted!

[Toby]

Hi Marius

Ok so far my code appears like this -

CUSTOM HEAD CONTENT:

<script>
window.laytheme.on("newpage", function(layoutObj, type, obj){

jQuery(document).on("hover", ".thumb",
function(event) {

jQuery("body").removeClass("red");
jQuery("body").removeClass("blue");

var category = jQuery(this).attr("data-catid");

if (category == 1) {
  jQuery("body").addClass("red");
  }

if (category == 2) {
	jQuery("body").addClass("blue");
  }
}

);

});
</script>

and CSS

.red {
background: #f1f1f1!important;
}
.red:hover {
background-color: #ff1900  !important;
}

.blue {
background: #f1f1f1 !important;
}

.blue:hover {
background-color: #0280f8 !important;
}

but the hover only works when the mouse leaves the window not when leaving the thumbnail

Chers
Toby

[mariusjopen]

Dear @Toby

this works:

.red {
    background: red !important;
}

.blue {
    background: blue !important;
}

<script>
window.laytheme.on("newpage", function(layoutObj, type, obj){
    
    jQuery(document).on("mouseenter", ".thumb", function(event) {
    
        var category = jQuery(this).attr("data-catid");
    
        if (category == 1) {
            jQuery("body").addClass("red");
        }
    
        if (category == 2) {
    	    jQuery("body").addClass("blue");
        }
    });
    
    jQuery(document).on("mouseleave", ".thumb", function(event) {
        jQuery("body").removeClass("red");
        jQuery("body").removeClass("blue");
    });

});
</script>

All the best!

Marius

[Toby]

Thank You Marius - Thats Great!

[mariusjopen]

Perfect! Happy to hear!