[Resolved] Exclude Image and Buttons from css link hover effects

[Tareq]

Hi,
I’m trying to exclude link hover effects from a class button and all img objects. But couldn’t succeed.

Here is the code I’m using.

:root {
  --mainColor: #ff9800;
}
.inside-article:not(.button){}  p a{
  background:
     linear-gradient(
       to bottom, var(--mainColor) 0%,
       var(--mainColor) 100%
     );
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 2px 2px;
  text-decoration: none;
  transition: background-size .2s;
}

.inside-article p a:hover{
  background-size: 4px 50px;
}

I tried several ways described in other support chats but couldn’t succeed.

Can you please let me know what am I doing wrong here?

[Ying]

Hi Kelvin,

Try change the below CSS selector:
.inside-article:not(.button){} p a to .inside-article p a:not(.easyazon-link):not(.gbutton)
.inside-article p a:hover to .inside-article p a:not(.easyazon-link):not(.gbutton):hover

[Tareq]

Great Ying! Thanks for the support. Problem solved!

[Ying]

No problem 🙂

[Author]

Posts