Mouse Hover Colors – Going Crazy…

  • Resolved EdwardD

    (@money4you)


    4 years, 6 months ago

    Hello…

    I have a slight mix at my website… between Mezzo Child Theme and Elementor plugin… not sure if this is the issue, but what I’m trying to fix is:

    1. Entire Site: Mouse over on links (both the top dropdown menu and on post titles) go WHITE (as in the background) when mouse over. I’ve tried changing this all over, incluiding custom css with the !important tag with no luck.

    https://marketingtofly.com/

    2. On this specific page, I have the opposite problem, there is a button, right above where it says “Nombre:” and it’s invisible unless mouse over:

    https://marketingtofly.com/social-media-audience-guide/

    Thank you very much in advance for any pointers/help you can provide!
    Best,

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @money4you ,

    Please find my responses below:

    1. This is the CSS code causing the issue. I will suggest to add your own Custom CSS using same selectors but add your CSS in footer. 
      
@media (min-width: 1200px)
#site-header-menu #site-navigation div.nav-menu > ul ul li:hover > a {
    /* background-color: #ffffff; */
    /* color: #fff !important; */
}

      Just Remove the ‘/*’ and ‘*/’ and then add your desired colors in place of ‘#ffffff’ and ‘#fff’.

    2. There are 2 different CSS being applied on input type submit. I will suggest to do the above step with following selector and with ‘!important’. Your problem will get solved. 
      
input[type="submit'] {
    background-color: 'You desired color hashcode';
    color: 'You desired color hashcode';
}

    Please let me know your response.

    Hi.
    As to dropdown menu, there are two rules as below. Hover state is attached to li instead of a tag.
    This css is loaded with admin-ajax.php?action=themestek_theme_css. Parent theme?
    It is necessary to override them with higher priority rule, like adding #masthead prior to each rules.

    @media (min-width: 1200px) {
    .ts-dmenu-active-color-custom #site-header-menu #site-navigation div.nav-menu > ul > li li:hover > a {
        color: #fff;
    }
}
    @media (min-width: 1200px) {
    #site-header-menu #site-navigation div.nav-menu > ul ul li:hover > a {
        background-color: #ffffff;
        color: #fff !important;
    }
}

    With browser’s developer tools, you can easily find css applied to a specific element.

    Thread Starter EdwardD

    (@money4you)

    Hello @ikaring and @ketanvyawahare Thank you very much!

    It wasn’t quite that easy, but you two gave me the general direction, this is the final code, first is for issue # 1 and second paragraph is for issue #2

    @media (min-width: 1200px) {
    .ts-dmenu-active-color-custom #site-header-menu #site-navigation div.nav-menu > ul > li li:hover > a {
        color: #8b0a50;
    }
}

@media (min-width: 1200px) {
    #site-header-menu #site-navigation div.nav-menu > ul ul li:hover > a {
        background-color: #ffffff;
        color: #8b0a50 !important;
    }
}
    #mc-button { background-color: #ffffff !important; }
#mc-button:hover { color: #8b0a50 !important; }
#mc-button {     font-size: 13px;
    color:#000000 !important; }

    On the mailchimp form code I had to edit the submit line and “give it an ID” so I could target the CSS

        <input type="submit" value="Descargar!" id="mc-button">
    • This reply was modified 4 years, 5 months ago by EdwardD.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Mouse Hover Colors – Going Crazy…’ is closed to new replies.