Change background colour of a column on hover?

Hi Zorawar,

This is possible but quite complicated to do as you’ll need to handle the hover.

Preface: Following this post will allow you to have a hover similar to the one seen on this page.

If you haven’t already installed it, you’ll need to install the SiteOrigin CSS plugin, which gives you a full CSS editor.

Once you’ve got that installed, please open up the page you intended to apply this too and then open the row you would like to apply this to. To open a row you click the wrench icon above it. Once you’ve done, head over to the row styles sidebar and open the Attribute settings group. Set the Row Class to .column-color_change and save the page.

—–

Now, if your intention is to have a background present first, you’ll need to set this now. If not, skip to the next section.

Single Widget
To set the column color you’ll need to open up the widget in that column and head over to the widget styles sidebar. Open the Design settings group and set the Background Color.

Multiple Widgets
If you wish for this background to be applied to multiple widgets in this column you’ll need to add the widgets to a single layout builder widget. A layout builder widget is a page builder in widget form and it allows you to create complicated layouts so it’s perfect for what you’re trying to do.

Once you’ve added and set up the layout builder, open it up and then head over to the widget styles sidebar. Open the Design settings group and set the Background Color.

—–

Please navigate to WP AdminAppearanceCustom CSS. Both of the following CSS use nth-child to select the correct column. To change which column the CSS will effect you simply need to adjust the number to the column you wish for the hover to apply to.

The following CSS will allow you to change the entire column CSS when no background is set via a widget.

.column-color_change > .panel-grid-cell:nth-child(1):hover {	background: #0f0 !important;}

The following CSS will allow you to target specific columns and have it affect the layout builder. It uses a basic nth-child so you simply need to adjsut the number to the column you wish for the hover to apply to.

.column-color_change > .panel-grid-cell:nth-child(1):hover .widget > .panel-widget-style {	background: #9e9e9e !important;}.column-color_change > .panel-grid-cell:nth-child(2):hover .widget > .panel-widget-style {	background: #0f0 !important;}

Let me know if this makes sense or if you would like an explanation on anything. Just note that the selectors I used are very complicated and are very advanced CSS.