wordpress 在悬停状态更改图标颜色

Question

我有一些社交媒体图标，当我悬停在它们上时，我想改变颜色。我只是无法让它工作。

我的代码是这样的 -

global $wp;

$current_url = home_url( add_query_arg( array(), $wp->request ) );

// add action with variabile in url to share

add_action('woocommerce_after_add_to_cart_button','my_social_btn');

function my_social_btn() {

  echo '<div class="my-custom-social">

  <div class = "facebook-icon"> <a href="https://www.facebook.com/sharer/sharer.php?u='.$current_url.'" class="social fb"><i class="fa fa-facebook-f"></i></a> </div>

  <a href="https://twitter.com/intent/tweet?url='.$current_url.'" class="social tw"><i class="fa fa-twitter"></i></a>

 <a href="

https://pinterest.com/pin/create/bookmarklet/?media=[post-img]&url='.$current_url.'" class="social tw"><i class="fa fa-pinterest"></i></a>

 </div>

';

}

我想如果我给 facebook 图标它自己的 div 类我可以使用下面的 css，但它不起作用

.facebook-icon:hover {

 color: blue!important;

}

Answer 1

你的 css 应该是这样的.facebook-icon:hover a i {&nbsp; &nbsp;color: blue!important;}