Clickable Column with Mouse Hover Background Color Change

[skeeley06]

Hello.
I have a row with two columns, one has an image (Column 1) the other has a Feature Box (Column 2).
I put a solid border around Column 2. I would like to make Column 2 clickable with a redirect link and I’m also looking to have the Column 2 background change colors on a mouse over.
Any help would be appreciated. Thank you.

[thai]

Hi @skeeley06,

Please take a look at this ticket:

Adding Hover Effect to Clickable Column

Hope it helps

[skeeley06]

Thank you for your response. I am currently trying to work through this. 1st I’m going to start with trying to make Column 2 clickable, following my above mentioned layout.
In Column 2 Column Customize Setup Class field I entered class-1.
Next in JS I entered the following code:

jQuery(".class-1").wrap("");

The following are my issues:

1. This caused the gap between Column 1 and Column 2 to disappear. When viewed on the actual site.
2. The “Title and Content” field text in the Feature Box element changed to green then changes to a different shade of green when I mouse over. I wanted to keep the text black and solid during mouse over since next I will be attempting to get Column 2 background to change color during mouse over.

Thank you in advance for your help.

[skeeley06]

This is the actual JS code. Did not copy over in my last reply.
Thank you

jQuery(".class-1").wrap("<a href='http://***.com/privacy-policy/'></a>");

[ruenel]

Hello @skeeley06,

Please remove your JS code. You will have to do this instead:

• Add this custom JS

(function($){
 $(document).ready(function($) {
  $(".class-1").append("<a href='http://***.com/privacy-policy/'></a>"); 
 });
})(jQuery);

• Insert the following custom css in the settings tab, Settings > Custom CSS

.class-1{
    position: relative;
}

.class-1 > a {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

We would loved to know if this has work for you. Thank you.

[skeeley06]

This worked perfect! Thank you so much for the help. Again, amazing support!

Next I tried copying the above mention code to make Column 2 change color with a mouse over, but had no luck.
I’m looking to change the background color of Column 2 to rgb (255,106,0) during a mouse over.
Any help would be greatly appreciated.
Thank you again for your continuous support. Outstanding!!

[ruenel]

Hello @skeeley06,

The suggestion above is only applicable to columns using classes. If you want several columns with different links, you will need to add custom column-ID ID and custom linked-column class to each of the columns. You may then update the JS code and use this:

(function($){
 $(document).ready(function($) {
  $("#column-ID-1").append("<a href='http://example.com/link-1.php'></a>"); 
  $("#column-ID-2").append("<a href='http://example.com/link-2.php'></a>"); 
 });
})(jQuery);

The custom css must be updated too:

.linked-column{
    position: relative;
}

.linked-column > a {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

Hope this works out for you.

[skeeley06]

I think I may have not been clear in my last reply.
In each section I have 2 columns… One image element (Column 1) and one Feature Box element (Column 2). Column 2 is the only column I want to be clickable. This was accomplished perfectly with the first set of code you game me. Now all I want to do is make the clickable Feature Box Column (Column 2), change background color to rgb (255,106,0) during a mouse over.
Any help with that would be great.
Thank you!

[ruenel]

Hello @skeeley06,

The featured box does not have any background color, the column does. You will simply need to add this code:

.class-1:hover {
    background-color: rgb(255,106,0) !important;
}

If you need anything else we can help you with, please let us know.

[skeeley06]

Exactly what I needed!
Thank you again for all your support!

[paul.r]

You’re welcome!