Background colour change on rollover

[mariusjopen]

Hi @Toby

as far as I understood – you wanted that the background is changing to a specific color when you hover a category, right?

This is not happening in your example.

Are we talking about the same thing?

All the best!

Marius

[Toby]

Hi Marius

Yes that's what I want - unfortunately my attempts have been unsuccessful - can you help resolve this?

The previous post I'd attached the wrong JSFIDDLE - Here is my latest attempt

https://jsfiddle.net/Toby05/va6a10g1/67/#&togetherjs=y4rLV5GyyC

Thanks
Toby

[mariusjopen]

Dear @Toby

this is the way to go:

The code you just posted is already a step backward.

Please try this code and let me know where the problem is.

All the best!

Marius

@mariusjopen said in Background colour change on rollover:

Hi @Toby

add this to your 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 this to your custom CSS:

.red {
  background: red !important;
}

.blue {
  background: blue !important;
}

I have two projects with two different categories.
If you inspect the thumbnails they are called 1 and 2:

I placed the images as project thumbnails:

You will probably need to adjust the code.
But this is the base and you can go on from there.

Good luck!

Marius

[Toby]

Hi Marius

As I explained last week when I add the above code there is no mouse leave effect when the mouse leaves the thumbnail to revert back to the original colour (#f1f1f1)

So I added this code to CSS - example for the red hover

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

Which nearly works, however the mouse leave doesn't revert back to #f1f1f1 until the mouse / pointer leaves the window - I'd like it to happen when the mouse leaves the thumbnail.

Any ideas
Cheers
Toby

[mariusjopen]

Dear Toby,

may I ask you to post the code in the this formatto this thread. And also make it as readable as possible for me. Breaks etc.
Otherwise I need to do a surgery which costs a lot of time.

Thank you

Marius

[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!