Background colour change on rollover

Toby · Apr 2, 2018, 4:10 PM

Hi Marius

Thanks for the code.

I've added this code to my CSS

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

Which works but only when the pointer leaves the actual window and not when it leaves the thumbnails

Any ideas?

I'd also like this to only effect the overview page - I did a search on the forum and found this code

if(obj.slug == "frontpage”){

changing “frontpage to match my slug and applied it like they said to your example but it didn’t work.

Cheers
Toby

mariusjopen · wrote on Apr 5, 2018, 7:49 PM

Hi Toby,

can you post the whole code you wrote?

Also I remember that you used mouseenter and mouseout, right?

That was the way to go.

Best!

Marius

Toby · wrote on Apr 6, 2018, 8:42 AM

Hi Marius

I began by adding the above code

CSS

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

JQUERY

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

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

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

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

if (category == 3) {
	jQuery("body").addClass("blue");
  }
if (category == 5) {
	jQuery("body").addClass("yellow");
  }

}

);

});
</script>

as I said above this worked all be it the hover off only worked once the mouse had left the window not the thumbnail

I did attempt an example with mouseenter and mouseout in JSFIDDLE -

https://jsfiddle.net/Toby05/3yjw0dpk/15/#&togetherjs=9ISpwkHzla

HTML

<div class="box" data-catid="1">data-catid=1</div>

CSS

.box

JQUERY

$(document).ready(function(){
$(".box").mouseenter(function(){
$(this).css("background-color", "#ff1900");
});
$(".box").mouseleave(function(){
$(this).css("background-color", "#f1f1f1");
});
});

but have been unsuccessful in applying more than one colour / category and adding to lay theme.

Cheers
Toby

Toby · wrote on Apr 7, 2018, 10:12 AM

Hi Marius

I've managed to get some jquery working on JSFIDDLE but when I transferred the code into Layhtheme
it doesn't work

https://jsfiddle.net/Toby05/va6a10g1/45/#&togetherjs=VIBsap8NEF

and here's the code i'm pasting into CUSTOM HEAD CONTENT:

Thanks
Toby

mariusjopen · wrote on Apr 8, 2018, 2:36 PM

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 · Apr 8, 2018, 2:46 PM

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 · wrote on Apr 10, 2018, 12:00 PM

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 · wrote on Apr 10, 2018, 12:10 PM

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 · wrote on Apr 12, 2018, 10:39 AM

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 · wrote on Apr 12, 2018, 11:12 AM

This post is deleted!

Toby · Apr 12, 2018, 10:58 AM

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 · Apr 16, 2018, 1:59 PM

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 · wrote on Apr 16, 2018, 1:59 PM

Thank You Marius - Thats Great!

mariusjopen · wrote on Apr 18, 2018, 10:16 AM

Perfect! Happy to hear!

Lay Theme Forum

Background colour change on rollover

Before you post:

When you post:

Online Users