Slider hover color

Design help General
1

I have default color variable set on all paragraphs and heading element. When I’m hovering over a slide on the slider element, I’m changing the background color and text color. But the text color change is only being inherited by the heading element and not the paragraph element (and also not the text in the link block element).

Help me understand why this is happening as targeting the parent (or grandparent) font color should be the more specific order?

(I know I can achieve this with interactions, but please help me figure out by just using the CSS)

image
image1493×728 34.6 KB

image
image1511×680 35.8 KB

Here is my site Read-Only: Webflow - dreamsaleliving

2

hi @Aseem_Bathla10 this simple code will do the job

.slide_content-wrapper{
  background: var(--white);
  transition: all 0.2s linear;
    &:hover {
      background: var(--blue-dark);
      color: var(--white);
      & p, a{
      color: var(--white);
      }
   }
}

all you have to do is to remove :hover from slide_content-wrapper and also background-color-white class and apply this custom code. :man_shrugging:

3

I know I can use custom code to achieve this, but I wanted to figure out why changing the color on hover state only affects the heading.

I saw while inspecting that the ‘all paragraph’ element is defined later in the css, which does not make any sense because, the class of the parent is the more specific class than ‘all paragraph’ element