CODEWITHSUNDEEP
css
Alejandro Goffa
Alejandro Goffa

Reputation: 99

How to change color on hover for a link in a tab?

I want to change to text of the links "Lesson List" and "Browse Q&A" on hover, which I got to do adding the following to the WordPress Add custom CSS menu:

.tutor-tabs-btn-group a :hover {
    color: #000;
}

However, when hovering over the tab or icon, the changes do not apply. By inspecting it I can see the class is tutor-tabs-btn-group, and the specific links have the ID #tutor-lesson-sidebar-tab-content and #tutor-lesson-sidebar-qa-tab-content but targetting them doesn't seem to work.

I must say I have no idea about CSS, so I might be missing something really simple.

Here's the other code I have on Add Custom CSS, in case some can be conflicting with it:

a:not(.card):not(.btn-primary):not(.nav-link):not(.text-white):not(.dropdown-item):not(.btn-outline-primary):not(.btn):not(.elementor-button):hover, section:not(.text-light) .nav-link, footer:not(.text-light) .nav-link, .widget a {
    color: #fff; }

.tutor-single-lesson-wrap {
    background: #ffffff; }


.tutor-button-lesson-wrap {
    background: #ffffff; }

:root {
    --tutor-success-button-color: #000; }


.tutor-lead-info-btn-group .tutor-course-compelte-form-wrap button {
    display: block;
    width: 100%;
    background: #ad1519;
    color: #fff; }

.tutor-lead-info-btn-group .tutor-course-compelte-form-wrap button:hover {
    background: #ad1519;
    color: #fff; }

body.custom-background {
    background-color: #fff; }

.tutor-tabs-btn-group :hover {
    color: #000; }

Thanks in advance.

Upvotes: 3

Views: 1028

Answers (2)

Ranjeet Eppakayala
Ranjeet Eppakayala

Reputation: 3028

This will fix the issue

.tutor-tabs-btn-group a:hover{
 color: #000 !important
}

.tutor-tabs-btn-group a:hover will apply css for a tag

<element class="tutor-tabs-btn-group">
  …
    <a :hover>

And

.tutor-tabs-btn-group a :hover will apply css for inner elements of a tag

<element class="tutor-tabs-btn-group">
  …
    <a>
      …
        <element :hover>

Upvotes: 1

hexcrion
hexcrion

Reputation: 11

Maybe try to target a parent/wrap of your links, and then you can do:

.parentname a:hover {
 color: #000;
}

To find such a parent, you can right click on one of the links and select "Inspect Element". In the "style" tab of the Inspector you'll be able to see all the css rules applied to the element. You can test each of them live, by disabling or editing them.

Another possibility is that the links are not a links, but some kind of other html elements like label, turned into clickable elements by javascript. You can still change the css related to them, but in this case, don't look specifically for a selector. It could be something like:

.navigation label:hover {
 color: #000;
}

Good luck !

Upvotes: 0

Related Questions