# Change textcolor on hover over div

**URL:** <https://forum.pinegrow.com/t/change-textcolor-on-hover-over-div/4987>\
**Category:** Beginners\
**Created:** [February 19, 2021, 6:41pm UTC](https://forum.pinegrow.com/t/change-textcolor-on-hover-over-div/4987 "2021-02-19T18:41:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Riccarcharias](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/riccarcharias/32/4051_2.png) [@Riccarcharias](https://forum.pinegrow.com/u/Riccarcharias)\
**Post date:** [February 19, 2021, 6:41pm UTC](https://forum.pinegrow.com/t/change-textcolor-on-hover-over-div/4987/1 "2021-02-19T18:41:32Z")

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

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [February 19, 2021, 7:03pm UTC](https://forum.pinegrow.com/t/change-textcolor-on-hover-over-div/4987/2 "2021-02-19T19:03:52Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/8/8c12471516acd489a89cd8c2a6e97ce34b1f9035.png)  
Then if you select one of the p elements on the Page or Tree you will see your rule.  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/4509d7b1eb66d1b9ce00097f05e93281f0135f4f.png)  
Pinegrow only shows the active rules. Without the hover button clicked on the div element the rule isn’t active.  
Hope this helps,  
Bob

---

<div class="post-metadata">

**Author:** ![Riccarcharias](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/riccarcharias/32/4051_2.png) [@Riccarcharias](https://forum.pinegrow.com/u/Riccarcharias)\
**Post date:** [February 20, 2021, 6:23pm UTC](https://forum.pinegrow.com/t/change-textcolor-on-hover-over-div/4987/3 "2021-02-20T18:23:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [February 20, 2021, 8:06pm UTC](https://forum.pinegrow.com/t/change-textcolor-on-hover-over-div/4987/4 "2021-02-20T20:06:31Z")

</div>

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

[https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/5099f02d493be98a55985d408d2a855e9f7662f6.mp4](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/5099f02d493be98a55985d408d2a855e9f7662f6.mp4)
  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![Riccarcharias](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/riccarcharias/32/4051_2.png) [@Riccarcharias](https://forum.pinegrow.com/u/Riccarcharias)\
**Post date:** [February 21, 2021, 10:09am UTC](https://forum.pinegrow.com/t/change-textcolor-on-hover-over-div/4987/5 "2021-02-21T10:09:44Z")

</div>

Ahhh…thanks so much! That works.