Columns on hover

Support
#1

I am trying to make my columns on hover to have a box shadow. I successfully did so, but when you hover over the elements inside the column- the column’s box shadow goes away. Right now I have the following css (that is not working):

div#hi-line-product-columns-global:before {
    box-shadow: 5px 5px 10px #f1f1f1 !important;
}
div#hi-line-product-columns-global:after {
    box-shadow: 5px 5px 10px #f1f1f1 !important;
}
div#hi-line-product-columns-global:hover {
    box-shadow: 5px 5px 10px #f1f1f1 !important;
}
div#hi-line-product-columns-global:active {
    box-shadow: 5px 5px 10px #f1f1f1 !important;
}
div#hi-line-product-columns-global:focus {
    box-shadow: 5px 5px 10px #f1f1f1 !important;
}
div#hi-line-product-columns-global:focus-within {
    box-shadow: 5px 5px 10px #f1f1f1 !important;
}
#2

Hi there,

Thanks for writing in! You can just give your column a class e.g column-hover then add the following code in the Theme Options > CSS:

.column-hover:hover {
  box-shadow: 5px 5px 10px #f1f1f1 !important;
}

I tested this in my local setup and it works even when you hover over the elements inside the column. I trued to check the URL you shared but the page doesn’t exist.

Let us know how this goes!

#3

Perfect! Thanks!

#4

You are most welcome!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.