Pseudo class not being added

Beginners
1

My hover isn’t being added with nav-link:hover? I watched and read Rob’s pseudo classes tutorial. What am I missing?

Screen Shot 2021-08-03 at 12.42.24 PM
Screen Shot 2021-08-03 at 12.42.24 PM1620×867 148 KB

2

Does it work if you open the page in the browser?

3

Hover doesn’t work in my nice local browser. When I create the nav-link:hover class, the “Add class to the selected element” check box disappears. How does a pseudo class attach to element?

4

Nope, plus I seem to have zapped my red circle icons hover below, too. Pinegrow | Bootstrap Blocks Template

Still my media sizes work fairly well.

5

Hi @kat,
So, pseudo-classes only exist as states added by the browser. They aren’t “added” as classes to your elements like a normal class would be. Instead, the browser reads your stylesheet and finds any selectors with a ‘:hover’ and then keeps track of those elements.

So, on to your problems.

Starting with the red play circles. If I go into the dev tools, I can see a partial rule. The selector and property are okay, but the value is incomplete. It is: background-color: b;. Changing that to background-color: blue makes it work fine.

For the navigation link. I can see you made several attempts without success. Here, DevTools are your friend. Looking at the element you can see what color is being applied and what the ruleset looks like.

image
image1356×942 109 KB

So, the third rule down is the winner. Bootstrap is fairly opinionated and for some colors adds an !important. In order to overcome this you don’t have much choice but to add an !important to your ruleset. So - .nav-link:hover { color: #e1a855 !important; }
Actually, thinking about it, you would also see this in Pinegrow if you opened up the additional hidden rules in bootstrap.css by clicking on the greyed-out link in your Styles panel.
Good Luck,
Bob

6

Really great explanation!
New Qs

  1. When selecting color in color panel how do you use the color picker eyedropper? I’ve tried clicking all over the place.
  2. Anyway to add an outline to text?
    .title { text-shadow: 0px 7px 0px rgba(21, 74, 110, 0.68); text-align: right; grid-area: 2 / 2 / 3 / 5; color: #f8eecf; box-shadow: 10; font-size: 81px; }
7

Hi @kat,

  1. After clicking on the eyedropper your pointer should turn into a cross. Hovering over anything in the app will bring up a color. Just click when you find the color you like.

  2. Not quite sure what you are looking for, but you could use -webkit-text-stroke. Just be aware that IE and some older browsers don’t support it so you have to supply a fallback. Since it isn’t an approved W3C styling there isn’t a visual control in Pinegrow for it. You will have to type the rule in manually.

Cheers,
Bob

1 Like