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

我认为你的问题是由以下原因造成的：

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

这意味着只更改没有背景的链接以及要更改的实际元素。

如果您想更改myplugin-container背景颜色，那么最简单的方法是：

.myplugin-container{ background: white; }

祝你好运！

CSS change color of web icon, html customize wordpress plugin

1 个答案: