Jump to content

My text ob hover code is only working when I enter edit mode.

Recommended Posts

So I am using a few lines of custom CSS from a pretty reliable online source. It'a reveal text on hover code, but it doesn't appear to work in the display page when I enter the code. I save the custom CSS, then enter edit mode on the site and it works. But when I launched the site, it doesn't work. Just like in the display page, the text appears over the image all the time. The link still works, but that's it.

Here is the code I am using:

@media only screen and (min-width: 640px){ 
#block-yui_3_17_2_1_1678207568530_332105
  { 
opacity: 0; 
transition: opacity .5s 

#block-yui_3_17_2_1_1678207568530_332105:hover { 
opacity: 1; 
transition: opacity .5s 

}

below are two screen shots. The one on the left is in the preview, you can see the text is visible constantly. The one on the right shows the effect appearing when I am editing the site.

I have tried it on several different sites, but no luck. Anyone have any ideas?

The text in the reveal has a link. Could that be the problem?

thanks

Screen Shot 2023-03-19 at 09.51.36.png

Screenshot.png

Link to comment
  • Replies 8
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
On 4/3/2023 at 10:49 PM, TaylorMesser said:

I'm having the same issue where the hover effect only works in edit mode and not once I save the site. Have you found a fix?

If you share link to your site, we can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
On 8/28/2023 at 7:04 PM, Karin12345 said:

Hi,

I have the same issue. The text on hover code only works in edit mode. Tried different things, but nothing works.

Appreciate help, thanks!

Skärmbild 2023-08-28 140032.png

If you share link to page where you have problem, we can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 8/28/2023 at 7:04 PM, Karin12345 said:

Hi,

I have the same issue. The text on hover code only works in edit mode. Tried different things, but nothing works.

Appreciate help, thanks!

Skärmbild 2023-08-28 140032.png

Use this code. Some SS core code overrides your code so need to use !important

@media only screen and (min-width: 640px) {
    #block-yui_3_17_2_1_1692880694238_13789 {
        opacity:0 !important;
        transition: opacity 1s;
    }
    #block-yui_3_17_2_1_1692880694238_13789:hover {
        opacity: 1 !important;
        transition: opacity 1s;
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/3/2023 at 11:02 AM, tuanphan said:

Use this code. Some SS core code overrides your code so need to use !important

@media only screen and (min-width: 640px) {
    #block-yui_3_17_2_1_1692880694238_13789 {
        opacity:0 !important;
        transition: opacity 1s;
    }
    #block-yui_3_17_2_1_1692880694238_13789:hover {
        opacity: 1 !important;
        transition: opacity 1s;
    }
}

 

Thank you so much! It worked 🙂

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.