Pinegrow Community Support Forum

Pseudo class :hover


#1

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.
Thanks


#2

@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

40

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

23

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

31

Hope this helps.


#3

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


#4

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