色をつけたヘッダーのSNSアイコンのマウスオーバーでの色変更

どこを何色にするかにもよりますが、基本的には

ul.snsp li.twitter-page a:hover span {
    background-color: #333;
}

こんな感じです。

.twitter-pageをそれぞれのクラスに変えて設定する必要があります。

本来は、

.snsp .twitter-page a:hover span {
    background-color: #333;
}

や、

.snsp li a:hover span {
    background-color: #333;
}

などで変更できますが、親テーマstyle.cssの優先度が高すぎるため、その優先度にあわせてセレクタを書く必要があります。いくつ表示されているかわかりませんが、cssで書いたら面倒ところですね。

それは右上のSNSボタンではなく記事下のSNSのではないですか？

どちらも同じスタイルが当たってます。
上だけにしたいなら.top-sns-followsを先頭に付けるだけです。余計面倒くさくなりますけども（笑）

構造的に言えば、

.top-sns-follows ul {}
.top-sns-follows li {}

などで本来はスタイルするべきですが、Simplicityの場合、follow部分は全部同じスタイルで、背景に各SNSカラーが入るかどうかだけの設定になってます。なんせ全部同じものを表示しているわけですから別に分ける必要もないので。

ただ今回のように場所によって変更したい場合に備えて一応親に当たる要素に.top-sns-followsなど位置を識別するスタイルがあるのでそれで分けられるというだけのことです。カスタマイザーで、トップ部分はカラーで、ボトム部分はカラーなしというような設定はないでしょう？
ウィジェットにしてもそうです。あるのは背景に色を付けるかどうかだけなので、全てに色を付けず、位置識別用のクラスの子要素としてスタイルすれば、完全に独自の色設定などにすることはできます。

かなりの微調整が必要ですが、別に四角でなくても丸でもできますし幅もっと持たせたり、アイコンではなくて文字でボタンを作ることもできます。

ようはやり方がわかれば組み合わせだけのことなんですよ。

そうなんですね。
あと、今気づいたんですが、どうやらIEだとダッシュボードの設定からSNSを白黒からカラーに変更してもこちらでCSSをいじらなくとも、ちゃんとマウスオーバーで色の濃薄が出るのにchromeだとなぜかSNSアイコンだけ反応しないみたいですね…

どうやらchromeのバグのようで、
それに関しては
http://cly7796.net/wp/css/opacity-does-not-work-in-google-chrome/
が参考になると思ったのですが、どの部分を変えればいいのかわからないで教えてください。

子テーマのstyle.cssに書けばいけると思います

おぉ
知らない間に計算が付いてた
びっくりです

chromeで

ul.snsp li.twitter-page a:hover span {
    opacity: .5;
}

とやってみましたが特に問題はありませんでしたよ。

リンク先のとデフォルトのはaタグが絡んでるんで問題が出るんじゃないですかね？
リンク先にも書かれていますが、aタグにdisplay: block;を入れたらたいてい解決しますが、前々からフォーラムでは面倒くさいほど言ってますが、aタグはただのリンク要員と考えるべきで、スタイルするべきはその他の要素です。
aタグはクリックした時にリンクが動作すりゃいいだけなんですよ。なので、本来としては、

ul.snsp li.twitter-page:hover span {
    opacity: .5;
}

これで動作するはずです。なんせ変えたいのはspanの色なわけですので。ただ親テーマがcssの優先度が高い書き方なのでそれを上書きする書き方をせざるを得ないというわけなのです。

また画像などではなく背景色なら、rgbaなどのアルファ(透明度)を設定できるプロパティで指定すれば良いですし、これであればアイコンは透過せず背景色だけ透過させることができます。

またこれらとは別のアプローチとして、全体を透過してるように見せたいというだけなら、マウスオーバーの時に任意の設定をした透過値を持っている疑似要素(::before,::after)を重ねても良いです。疑似要素は本来背景は透明で、背景色を設定した場合はその色になりますからここにrgbaで指定した背景色を重ねることで透過しているっぽく見せることができます。
z-indexを指定すれば、アイコンの前面にも背面にも配置することができるので、画像と透過値入り背景色をうまく使い、かつIEを無視すればmix-blend-modeなどでそれら要素自体にも更にエフェクトを書けることも可能です。

単純にaタグでopacityが動作しないなら、動作するプロパティで代用すればよいだけなので特別イレギュラーなことをしているわけでもありませんからアイデア次第でうまく実装できると思います。

実際に手を入れられたページでその動作がうまく行かない場合は、そのページのアドレスを公開してもらうかjsFiddleやcodepenなどの部分的にでも公開できるサイトにそれらを再現したり、具体的に実装したcssをここに貼り付けてもらうなどして、その問題点をピンポイントで解決する必要があります。

やり方自体は前レス通りですが、どういう状況で何をどうした時にどうなって欲しいというような具体例と仕様があればそれに近づける、あるいはそれそのものの回答を得られると思います。

つまり、「PC時、トップのフォローボタンをマウスオーバーした時に、その背景色を半透明の赤で表示したいが、背景カラーをカスタマイザーで設定している場合に半透明の赤にするためにはどうすればよいですか？半透明の赤は#f00の40%ぐらいです。」ぐらい具体的に書いてあれば、ほぼその通りの回答を得られると思います。