CSS or Custom .js questions

[sjones1787]

Hello, I have a client that I’m working on and they would like a feature that is a hover effect that changes background color and content. I have been trying to use some custom .js but I can’t get it to function.

Example: I added a simple code in the .js section on the page just to trigger an alert.

$(“document”).ready(function() {
$("#toggleThis").click(function(){
alert($);
});
});

I put a content area into one of the columns and I added div tag with an id of “toggleThis” just to trigger the .js alert. I’m just not having any luck with making the div tags in the content area work with the custom .js section of the page.

My client is looking at this website example the section under the Header “WHY YOU’LL LOVE US” https://www.onyxandrose.com/. There is a hover effect that is changing content and background colors with a ease transition. This is just an example of what they are wanting.

What is the best way to go about achieving this interactive column? I currently have a page section with 4 columns, I have been messing with custom jQuery, but I’m not having any success using the .js custom section on the page I’m trying to create. Even if I try to trigger a simple alert using custom .js code and trigger from within the X theme column element ID I get nothing, unsuccessful alert.

Maybe you could look at the example and push me in the right direction?

[ruenel]

Hello Scott,

Thanks for writing in!

Please forget the JS because it will just give you more and more complications later on. Since you already have 4 columns, you can make use of the column background options. By inserting a background color in the lower or upper layer, you may be able to change the column background color when you hover over the column.

Of course, you will need a little css. In your column settings, find the “Customize” tab and insert my-column class.

Once you have the background color and the custom class in place, you can then add this custom css:

.my-column .x-bg .x-bg-layer-upper-color {
    opacity:0;
    transition: opacity 1s ease;
}

.my-column:hover .x-bg .x-bg-layer-upper-color {
    opacity: 1;
}

We would love to know if this has worked for you. Thank you.