Change the mouse over colour - Feature with product demo block

Custom Coding
1

Hey guys, I wonder what is the code to change the mouse over colour of this block. Now its white and it is ruinning my design.

Tks a lot for the help

Captura de Tela 2023-11-21 às 08.51.58
Captura de Tela 2023-11-21 às 08.51.583164×2062 653 KB

2

Hi!
It can be done with this custom code (in the header custom code)
But so much to do for just this, I would recommend to change your design instead.

<style>
#hero1:hover {
  cursor: url('https://linktotheright.png'), auto;
}
</style>

You will change #hero1 by your corresponding block

You can customize the pointer here: Boxicons : Premium web friendly icons for free
then click download png, put the downloaded png in the Softr asset library. Then go to the asset library and click the little icon to get the url link of the asset… and replace https://linktotheright.png by the copied link.

:hot_face::hot_face:

Example here: https://test-play.softr.app/hover-mouse

3 Likes
3

I just wanted the big white rectangle to a different colour. Where should I state the colour code?

I am not looking to customize de pointer.

tks for all your help

4

Okay,

<style>
#feature2 .MuiGrid-item.feature-container:hover,
#feature2 .MuiGrid-item.feature-container.active {
  background-color: #aec8ec;
}
</style>

Replace #feature2 by the id/Name of your block.

I think I chose the same block type as you but not sure.

And change the #aec8ec by the color you need.

Code to be inserted in the header of the page.

3 Likes
5

Perfect! Thanks a lot Matthieu!

6

this was super helpful - how can I change the text color too though

1 Like