Skip Navigation

[Resolved] Undesired hover effect on buttons in Toolset WordPress Archive

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 3 replies, has 2 voices.

Last updated by Minesh 5 months, 3 weeks ago.

Assisted by: Minesh.

Author
Posts
#2700951

Dear Support

We are facing a CSS problem with the hover effect on one of our WordPress Archives created with Toolset. In a previous ticket I was told the issue was due to our theme (Astra). When I contacted Astra Support, they claimed it was Elementor's fault. When I contacted Elementor Support, they said it was Toolset's fault. So now I am back to you guys in the hope you can help!

The undesired hover effect can be seen on the "Find a Native Nanny" button on the Toolset Archive hidden link

Astra Support provided this screencast: hidden link where they then blamed Elementor.

Basically I don't want any effect on the button when the user hovers. It should just remain unchanged.

I am creating the button like this:

<a class="button" href="[wpml-string context="toolset-archives-nanny-ads-27956" name ="Find a Native Nanny link"]<em><u>hidden link</u></em>;">[wpml-string context="toolset-archives-nanny-ads-27956" name ="Find a Native Nanny"]Find a Native Nanny[/wpml-string]</a>

and using following CSS for normal and hover:

.button {
  color: #ffffff !important;
  background-color: #5f9ea0 !important;
  padding: 10px 20px !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border: none !important;
  border-radius: 5px !important;
}
.button:hover {
  color: #ffffff !important;
  background-color: #5f9ea0 !important;
  padding: 10px 20px !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border: none !important;
  border-radius: 5px !important;
}

Any ideas?

Thanks and kind regards
Simon

#2701024

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

I see you are adding custom anchor tag and when I checked I do not see any trace that Toolset is affecting the hover effect and even though if its by Toolset or Elementor or Astra its wise decision to add such simply CSS that overrides the current CSS that helps fix the issue.

#2701047

HI Minesh

Thanks. I understood from the first half of your sentence that you are confirming that Toolset is NOT at fault here, correct?

Can you please be a little more specific with what you mean by "its wise decision to add such simply CSS that overrides the current CSS that helps fix the issue"?

Thanks and kind regards
Simon

#2701049

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Thanks. I understood from the first half of your sentence that you are confirming that Toolset is NOT at fault here, correct?
==>
No - I dont see a trace of that at first sight.

Can you please be a little more specific with what you mean by "its wise decision to add such simply CSS that overrides the current CSS that helps fix the issue"?
===>
I mean to say when you are using such combination of third-party plugins themes etc there will be always possibility of little or major conflict of any kind but fortunately you have little CSS conflict and whatsoever plugin is involved, I suggest that to fix it by adding custom CSS that fix the issue.