Change textcolor on hover over div

Beginners
1

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>Paragraph</p>
<p>Paragraph</p>

CSS:

    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?

UPDATE

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.

2

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.

image
image576×856 40.6 KB

Then if you select one of the p elements on the Page or Tree you will see your rule.
image
image1160×636 60.1 KB

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

1 Like
3

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)?

4

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.


Cheers,
Bob

1 Like
5

Ahhh…thanks so much! That works.