CSS change color of web icon, html customize wordpress plugin

Question

I am trying to customize a plugin, basically trying to change the color of a icon. I am able to set the default color of the icon to black with this -

    [class^="myplugin-"]:before, [class*=" myplugin-"]:before {
    color: black;
    }

My problem is on hover I'm not able to change the icon color to white or any. Inspecting element i found this-

   <div class = "myplugin-container">
   <ul>
   <li class = "myplugin-btn-google">
   <a title=....>
   <span class="myplugin-icon">
   <i class = "myplugin myplugin-google"</i>
   </span>
   </a>
   </li>
   </ul>
   </div>

I tried the following. It is changing only the span color to white but not the actual icon color -

  .myplugin-container li.myplugin-btn-google a:hover span{
   color: red;
   background: white;
   }

My assumption is I'm not selecting the right sub-class. Any help is very much appreciated.

Answer 1

I suppose you problem is being caused by:

.myplugin-container li.myplugin-btn-google a:hover span{

Which means that only the link which have no background is being changed and the actual element you want to change.

If you want to change myplugin-container background color, then the easiest way would be:

.myplugin-container{ background: white; }

Good luck!