Why isn't the hover effect working on my 'caption' class in Debut theme?

Store Design
1

Hi, simple question.

I’ve placed a class ‘caption’ on a p element in the html of one of my sections.


            {{ block.settings.caption | escape }}

I’ve styled it a bit already using CSS in a tag at the top of my section code.

.caption{
    font-size: 14px;
    margin-bottom: 0px;
    color: #1f81bd;
  }

It works great. See the blue text—working.

Screen Shot 2021-03-26 at 12.42.02 PM.png
Screen Shot 2021-03-26 at 12.42.02 PM.png1824×186 74.1 KB

But, when I add a hover effect to the ‘caption’ class nothing happens. Here’s the code again w an additional hover effect:

.caption{
    font-size: 14px;
    margin-bottom: 0px;
    color: #1f81bd;
  }

  .caption:hover{
  	color: red;
  }

But here’s the result:

no-hover.png
no-hover.png1815×176 64.9 KB

Here’s some extra info:

  • I’m using the Debut theme
  • my CSS is placed in a tag at the top of my section code instead of a liquid {% stylesheet %} tag.
  • I’ve tried other styles besides color, I’ve tried greater specificity, I’ve tried !important
  • I’ve reloaded my store page in all sorts of ways

Any idea’s what’s happening? Perhaps the Debut theme is preventing :hover effects?

2

Hello There,

Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.

3

Add this one css

.caption:hover {
color: red!important;
}
4

I’ve shared screenshots above.

Here’s my url: https://2ee23upsagqvc94h-55303176366.shopifypreview.com
Password: brandon

5

Tried it. Doesn’t work.

6

Please add this one css

.caption {
    position: relative;
    z-index: 9;
}
.caption:hover {
    color: red !important;
    display: block;
    background: transparent !important;
}
7

Didn’t work

8

Hey Brandon

It looks like the code below is overlaying your text from being hovered. I’m not too sure where to point you but try finding this and removing "style=“padding-top:100.0%;”. This should fix it completely and make the text hoverable.

Regards,

Martin

9

Wow you are so right, that is so strange. The padding, from a sibling element was preventing the hover effect on my target element. I did not know that was a thing. Thank you so much!!!

1 Like