Pseudo class :hover

Hello everybody! so I need to add the pseudo class :hover to an element. I am trying to do this using pg visual helpers. I select the element from the page structure panel then i click on the element class on the styling panel and then I select the :hover botton. I then change the background color which is what i am after for. I see nothing takes places. No pseudo class is created… In hand written css it should be pretty easy.

.green-dot {
grid-area: 3 / 1 / 7 / 4;
border-radius: 332px;
width: 40vw;
height: 40vw;
margin-top: -10px;
z-index: 0;
background-color: #759e7a;
.green-dot:hover {background-color: black}

Appreciate any help.

@red-rosefields I’ve just had a look at this and what I did is created a simple layout with container > row > column. Then I just selected the column element from the page structure panel then clicked the element styling panel and created a new class called .green-dot


Then changed the properties to whatever I wanted for .green-dot


After that I created a new class called .green-dot:hover and again I changed the properties to whatever I wanted. Now when I hover over the column it changes to the properties I created for .green-dot:hover


Hope this helps.

Fantastic! Thank you very much for the time you took to write down this example. !

1 Like

No worries, happy it was helpful to you. Hope you’re enjoying Pinegrow.

Thanks for the info here as well.

Turns out this is not very “automatic”. In fact, it’s way faster to do it by hand than using the UI. I wish this was easier through the UI.

1 Like

Yes, I agree on this. You still need to write down class + the pseudo state. Instead of just selecting the element and clicking the pesudo state bottom and start styling. This should be the natural way. Having to write the whole thing just goes agaist the purpose of having a UI as you end up spending more time in VS than in PG editor for such simple things. Hope devs at PG get our point and maybe rethink this in the future.