How to remove the Hover /or chage the hover color, when moving the mouse over the current username

Question

I have made some modification to my team site CSS, mainly I make the username text to be white and the background color to be blue. This will work well till the user move the mouse over the username , then the hover colour which seems to be white will hide the username text since it is also white as follow:-

So is there a way to remove the hover over the username, or to define different hover color (something such as blue)?

The defualt view is :-

and the custom CSS is :-

div#suiteBarLeft{
background-color: #008CD2 !important; 
filter: none !important;
color: #FFFFFF;
}


div#siteIcon{ 
display: none;
}



div#suiteBarRight{
background-color: #008CD2 !important; 
filter: none !important;
color: #FFFFFF;
}

div#zz4_Menu_t{

color: #FFFFFF;
}

div#zz4_Menu{

color: #FFFFFF;
}


#s4-titlerow{ 
    display: none !important;
}
#pageTitle {position: absolute; left: 400px; top: 40px;color:white;}

#uppersearch{ 
    background-color:white;background:white;color:white !important;
    }



div#welcomeMenuBox span.ms-core-menu-root { background-color: white; color: white !important; }

#SearchBox { background-color: white; }

.s4-title h1 a, .s4-title h2, .s4-title h2 a{color:white !important;}


/* Change the color of the usernames*/
#welcomeMenuBox a
{
        Color:#FFFFFF;
}
.ms-core-menu-box {
        background-color:#008CD2}

#zz5_Menu_t{
 background-color:#008CD2;   
        }
#zz5_Menu{
 background-color:#008CD2;
        }

#zz1_ID_PersonalActionMenu
{
 background-color:#008CD2; }



/* Change the color of the App page tittle*/
#pageTitle a
{
        Color:#FFFFFF;
}
</style>
.ms-welcomeMenu
{
   background-color: red;
}

for its text

.ms-welcomeMenu A:link
{
    color: red;
}

when hovering

.ms-welcomeMenu A:hover
{
    color: red;
    background-color:red;
}

Baring in mind that the Red color in the custom CSS will not show, i just added it for testing purposes.

Answer 1

There are custom SharePoint CSS classes that you may need to overwrite to change the colour of the hovering. Using IE developer tools I found that the two classes you're looking at are .ms-welcome-hover and .ms-siteactions-hover the welcome hover class obviously being the top bar for the page.

This code in your custom CSS should change it to a blue background with black text, just adjust the colours to what you need.

.ms-welcome-hover, .ms-siteactions-hover
{
    background-color:#FF6666;
    color:#000000;
}

Regards

~Donald

Answer 2

Please concentrate on the following css classes:

.ms-welcome-hover .ms-siteaction-hover

and adjust the background colors:

for the font color adjust this here: