Change textcolor on hover over div

I have a very simple problem but couldn’t find a solution (beginner):

I have a div with two p elements inside. I want to change the font color of those p texts when I hover over the div. The problem is that this doesn’t work because I defined the font color of my p elements project wide (p {color: #000000}):

<div class="div">


    p {
    color: #000000;

.div {
    width: 496px;
    height: 173px;

.div:hover {
    color: #ff0000;

I also tried !important but there was no change. I works when I use this: .div:hover p but then the rule disappears from my style tab. Is there a better way I could solve my simple problem? Why does the rule “.div:hover p” disappear from the style tab?


The rule “.div:hover p” was the solution. I can see it by activating :hover on the .div element in the style panel and take then a look at the p-object inside.

Hey @Riccarcharias,
So with regards to the first part of you question. Child elements (the p elements, in this case) will inherit the color of their parents, unless a specific style has been set on them. In this case, you gave a specific color to your p tags, so they don’t inherit the parent color. Using .div:hover p is exactly right because it has higher specificity than the base p styling.
With the second question - it is how Pinegrow works. In the style panel at the top there are four pseudo-class buttons. With the div highlighted, click on the :hover button.

Then if you select one of the p elements on the Page or Tree you will see your rule.

Pinegrow only shows the active rules. Without the hover button clicked on the div element the rule isn’t active.
Hope this helps,

1 Like

Hello Rob, Thanks for your help!

Good to know that I did everything richt. But the rule .div:hover p still disappears in the style panel…I see it after I created it but after I clicked on an other element I can’t find the rule any more? I see it in the CSS code but it’s not in the style panel, neither on the .div nor on the p. Even if I select :hover (:hover button) it does not appear. Do you see that rule after clicking on an other element (or close and reopen the project)?

You have to select the .div and click the hover button. Then if you select one of the p elements you will see the rule. Basically, you are re-creating the rule div:hover + p.


1 Like

Ahhh…thanks so much! That works.